Dropdown-Menü wird ausgeblendet, wenn Cursor aus dem Hauptmenü bewegt wird

Question

Ich arbeite an einem Dropdown-Menü für eine Website mit einer ziemlich großen Kopfzeile. Innerhalb der Kopfzeile befindet sich eine <ul>, die das primäre Menü enthält, wobei jedes Menüelement eine Dropdown-Liste enthält. Das Problem, das ich habe, ist, dass das primäre Menü kürzer als die Kopfzeile ist, so gibt es einen kleinen Platz, den der Cursor durchlaufen muss, wo es nicht über das primäre Menü oder das Dropdown-Menü schwebt. In diesem kurzen Bereich verschwindet das Dropdown-Menü. Wie kann ich das verhindern? Ich kann das Dropdown nicht verschieben oder es überlappt mit dem Header. Ich war auch nicht in der Lage, die Höhe der <ul> in einer effektiven Weise zu ändern.

Die Seite ist privat, aber ich habe eine jsfiddle Anzeige des Problems erstellt Ich habe: https://jsfiddle.net/x0hvdaqn/

bearbeiten ich die Geige mit einem div gemacht hatte statt einer ul der Einfachheit halber, aber wenn Ich änderte es in eine ul begann es zu arbeiten. Das eigentliche Menü, das ich erstelle, ist genauso aufgebaut, funktioniert aber nicht. Warum sollte das der Fall sein?

Neue Geige mit ul statt div: https://jsfiddle.net/tgqof8my/

Answer 1

Verwendung dieser Code. Ich hoffe, Sie müssen Ihre Marge in drop verringern. Verwenden Sie diese ...

#wrapper { 
 
    width: 100%; 
 
    height: 75px; 
 
    background-color: green; 
 
    text-align: center; 
 
} 
 
#button { 
 
    height: 40px; 
 
    width: 25%; 
 
    margin: auto; 
 
    background-color: yellow; 
 
    top: 25px; 
 
    position: absolute; 
 
} 
 
#drop { 
 
    display: none; 
 
    background-color: red; 
 
    margin-top: 20px; 
 
} 
 
#button:hover #drop { 
 
    display: block; 
 
}

<div id="wrapper"> 
 
    <div id="button"> 
 
    Primary Menu Item 
 
    <div id="drop"> 
 
    Dropdown 
 
    </div> 
 
    </div> 
 
    Header 
 
</div>