Fehler im Dropdown Menü

Heii, zuerst mal eine kleine Info von mir. :slight_smile: Ich bin 15 Jahre alt und lerne zurzeit noch HTML, CSS & PHP. Also seid mir bitte nicht sauer wenn ich etwas nicht verstehe oder Falsch machen. :slight_smile: Danke!

Ich habe mir ein kleines Dropdown Menü „gecodet“. (Aus einem Tutorial)
Nun habe ich das Problem das wenn es erscheint sehr schnell wieder weg geht und man sehr Schnell mit der Maus sein muss um drauf zu kommen. Könntet ihr mal kurz über meinen Code schauen? :slight_smile:

Mein HTML Code: (Menü Punkte nur erfunden.)

[CODE]

Startseite





  • Startseite

  • Minecraft

    • Statuscheck

    • Verfügbarkeit

    • Bestellen



  • Musik Bots

    • Verfügbarkeit

    • Bestellen



  • Kontakt

  • Server Status

  • Kundenlogin




</footer>
[/CODE]

Mein CSS Code:

[CODE]@charset „utf-8“;
body {
background-image:url(„…/images/background.jpg“);
font-family:Melvetica, sens-serif;
}

  • html body {
    text-align:center;
    }
    .nav {
    position:absolute;
    top:0;
    left:auto;
    }
    .nav ul {
    margin:0;
    padding:0;
    float:left;
    height:38px;
    box-shadow:0px 0px 32px 0px #lll;
    border-radius:10px:
    }
    .nav ul li {
    list-style:none;
    float:left;
    background:#222;
    padding:10px;
    width:85px;
    text-align:center;
    transition:all 500ms;
    color:#999;
    border-right:1px solid #444;
    position:relative;
    border:none;
    }
    .nav ul li:first-child {
    border-radius:10px 0 0 10px;
    }
    .nav ul li:last-child {
    border-radius:0 10px 10px 0;
    border:none;
    }
    .nav ul li:hover {
    background:#09C;
    color:#FFF;
    }
    .nav ul li:hover ul {
    height:auto;
    opacity:1;
    }
    .nav ul li ul {
    height:0;
    overflow:hidden;
    opacity:1;
    position:absolute;
    left:0;
    top:45px;
    }
    .nav ul li ul li {
    width:130px;
    }
    .nav ul li ul li:first-child {
    border-radius:10px 10px 0 0;
    border:none;
    }
    .nav ul li ul li:last-child {
    border-radius:0 0 10px 10px;
    border:none;
    }[/CODE]

Wäre sehr Nett von euch wenn ihr euch das mal anschaut. Ihr wisst auch glaube ich was das Problem ist.
Falls nicht: Das dropende Menü soll nicht verschwinden damit man die Menü punkte anklicken kann.

Screenshot vom Menü:
http://image.prntscr.com/image/1046e8329bfe4082bac2335435f50785.png

Ich hoffe ihr könnt mir Helfen! :smiley:

Mit Freundlichen Grüßen,
FreakySlimeHD.

Die Ursache findet sich in der oberen Startposition top:45px, die eine Lücke zwischen dem Haupt- und Untermenü erzeugt. Wird diese mit dem Mauszeiger überfahren, schließt das Untermenü vorzeitig.

Lösung: Stattdessen für das Dropdown einen oberen Innenabstand padding-top festlegen. Der obere Elementrand schließt somit direkt am Hauptmenüpunkt an, und die Lücke befindet sich nicht mehr außerhalb, sondern innerhalb des Untermenüs.

Demo: https://jsfiddle.net/spicelab/u73romj2/

Grundsätzlicher Hinweis zur falschen HTML-Syntax:

[code=html]

Startseite ... [/code]gehört so: [code=html] Startseite ... [/code]

Moderation: Von HTML nach CSS verschoben.

Danke für deine Antwort, du hast mir wirklich sehr geholfen. :slight_smile:

That’s my job :smiley: