Dropdown menu not working properly in navigation bar when said navigation bar is set to position:fixed;

Question

I have designed a navigation bar with four options, whereupon while one of these options are hovered, a dropdown menu appears. The dropdown menu functions properly while the navigation bar is not set to position:fixed; but when it is, the dropdown menu covers the option/link that activates it.

Here I have linked a Jsfiddle: https://jsfiddle.net/rqhenq4a/

I have implemented the fixed navigation bar with the following lines of code:

body {
padding-top:49px
}

(To avoid the navigation bar to overlap underlying content, the navigation bar happens to have a height of exactly 49px)

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

The first line of code to make the navigation bar fixed, the second line of code to make the navigation bar cover the whole viewport, the third line of code to let it be on top of the viewport at all times (I think), and the last line of code to avoid the navigation bar to inherit opacity from an underlying image.

The desired result would be a fixed navigation bar where the "Produkter" option would not be covered by the options of the dropdown menu.

Answer 1

is this what you are looking for jsfiddle.net

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

Just add top:100%;

Answer 2

you are just missing that offset within top. By setting position to absolute, you have default top offset 0. Here is your edited code, fix is on line 46.

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

Code example:

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