javascript - 如何让导航栏中的 "dropdown"菜单下拉到正确的位置？

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