Javascript 我怎样才能得到“的”呢；下拉列表“；导航栏中的菜单是否下拉到正确的位置？

我正在创建一个垂直导航栏，在鼠标上方的右侧弹出子菜单

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

我读了一些关于如何制作这些的书，我想我应该把定位设置为绝对，然后从左边偏移。这是我的子菜单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;

}

---

任何帮助或见解都将不胜感激

你必须给你的

李
一个
位置：相对的
你必须给你的
李
一个如此头痛的问题
位置：相对的
！非常感谢！如果你想把它写进一个答案，我会选择最好的并给它打分