Dropdown-Menü funktioniert nicht richtig in der Navigationsleiste, wenn die Navigationsleiste auf Position eingestellt ist: fest;

Question

Ich habe eine Navigationsleiste mit vier Optionen entworfen, woraufhin während einer dieser Optionen ein Dropdown-Menü erscheint. Das Dropdown-Menü funktioniert ordnungsgemäß, wenn die Navigationsleiste nicht auf Position eingestellt ist: fixed; Aber wenn dies der Fall ist, deckt das Dropdown-Menü die Option/Verknüpfung ab, die es aktiviert.

Hier habe ich eine Jsfiddle verbunden: https://jsfiddle.net/rqhenq4a/

ich die feste Navigationsleiste mit den folgenden Zeilen Code implementiert haben:

body { 
padding-top:49px 
} 

(die Navigationsleiste zu vermeiden zugrunde liegenden Inhalte zu überlappen, die Navigation bar geschieht eine Höhe von genau 49px haben)

ul { 
position:fixed; 
width:100%; 
top:0; 
z-index:1; 
} 

der ersten Zeile des Codes die Navigationsleiste befestigt ist, die zweite zu machen Codezeile, damit die Navigationsleiste das gesamte Ansichtsfenster abdeckt, die dritte Codezeile immer über dem Ansichtsfenster (denke ich) und die letzte Codezeile, um zu verhindern, dass die Navigationsleiste die Deckkraft erbt ein zugrunde liegendes Bild.

Das gewünschte Ergebnis wäre eine feste Navigationsleiste, bei der die Option "Produkter" nicht durch die Optionen des Dropdown-Menüs abgedeckt würde.

Answer 1

ist das, was Sie für jsfiddle.net

ul li ul#dropdowncontent { 
    min-width: 100%; 
    display: none; 
    position: absolute; 
    z-index: 999; 
    left: 0; 
    width: 90px; 
    top: 100%; 
} 

Fügen Sie einfach oben suchen: 100%;

Answer 2

Sie fehlt nur diesen Offset innerhalb oben. Durch die Einstellung Position absolut, haben Sie die Standardoffset oben 0. Hier ist die bearbeitete Code, fix ist auf der Leitung 46.

https://jsfiddle.net/rqhenq4a/3/

Code-Beispiel:

ul li ul#dropdowncontent { 
min-width:100%; 
display:none; 
position:absolute; 
z-index:999; 
left:0; 
top:49px;  /*This line here <---------- */ 
width:90px; 
}