Question

我正在创建一个垂直导航栏，鼠标悬停时会弹出右侧子菜单。

唯一的问题是，当我将鼠标悬停在类别上时，无论它们位于导航栏的顶部还是底部附近，它们的子类别栏都会显示在导航栏顶部的右侧。

我做了一些关于如何制作这些的阅读，并且据说我应该将定位设置为绝对，然后从左边做一个偏移。这是子菜单的css代码：

#sidenav2 li ul
{
position:absolute;
left:200px;
Top:0px;
display:none;
}

所以我认为它可能与顶级设置有关，并摆脱了这一点。令我惊讶的是，它几乎奏效了。每个子菜单都出现在与悬停在其上的元素相对应的不同位置。唯一的问题是它们弹出大约10个像素太低。不是真的理解css规则是如何应用的，我想也许我可以应用一个小的底部偏移来使每个子菜单稍微上升，但随后它们都开始在底部附近弹出。

我不明白如何解决这个问题，并且让事情变得更糟，我不知道如何跟上这些看似随意的结果或决定它们的规则。

如果它有任何区别，我的菜单项和子菜单都不是用静态html编写的，它们是mysql查询的结果，它将每个类别的子项放在该项目列表中的无序列表中。

这是我的其他相关的CSS代码。这个问题很可能就在这里。

#sidenav2
{
float:left;
width:200px;
border: solid black 1px;
height:1000px;
background-color:red;
margin-top:-10px;

}

#sidenav2 ul
{
position: relative;
list-style-type:none;
border:0px;
padding:0px;
background-color:red;
}

#sidenav2 ul li
{
display:block;
padding:5px;
color:white;
cursor:pointer;

}

非常感谢任何帮助或见解！

Answer 1

您必须将position: relative提供给li

如何让导航栏中的“下拉菜单”下拉到正确的位置？

1 个答案: