Question

我设计了一个带有四个选项的导航栏，当其中一个选项悬停时，会出现一个下拉菜单。当导航栏未设置为position：fixed时，下拉菜单正常运行;但是当它出现时，下拉菜单会显示激活它的选项/链接。

我在这里链接了一个Jsfiddle：https://jsfiddle.net/rqhenq4a/

我已使用以下代码行实现了固定导航栏：

body {
padding-top:49px
}

（为避免导航栏与基础内容重叠，导航栏的高度恰好为49px）

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

使导航栏固定的第一行代码，第二行代码使导航栏覆盖整个视口，第三行代码使其始终位于视口顶部（我认为），以及避免导航栏从底层图像继承不透明度的最后一行代码。

所需的结果将是固定的导航栏，其中“Produkter”选项不会被下拉菜单的选项覆盖。

Answer 1

这就是您要找的jsfiddle.net

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

添加顶部：100％;

Answer 2

你只是错过了顶部的偏移量。通过将position设置为absolute，您可以使用默认的top offset 0。这是您编辑的代码，修复在第46行。

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

代码示例：

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

当所述导航栏设置为position：fixed;

2 个答案: