我正在创建一个垂直导航栏，它在鼠标悬停时会在右侧弹出子菜单。
唯一的问题是当我将鼠标悬停在类别上时，无论它们位于导航栏的顶部还是底部附近，它们的子类别栏都会出现在导航栏顶部的右侧。
我做了一些关于如何制作这些的阅读，据说我应该将定位设置为绝对，然后从左侧偏移。这是我的子菜单的 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;
}
任何帮助或见解将不胜感激！