我如何在导航栏中获取“下拉”菜单以将其下拉到正确的位置？

Question

I'm creating a vertical navigation bar, which has sub menus pop up to the right on mouseover.

The only problem is when i mouseover the categories, no matter whether they are positioned near the top or bottom of the navigation bar, their sub category bar appears up to the right of the top of the nav bar.

I did some reading on how to make these, and supposedly im supposed to set positioning to absolute, and then do an offset from left. This is my css code for the submenus:

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

So i figured that it might have something to do with the top setting, and got rid of that. To my surprise, it almost worked. Each submenu was popping up at a different spot corresponding to the element hovered over. The only problem was that they were popping up about 10 pixels too low. Not really understanding how the css rules applied, i figured maybe i could apply a small bottom offset to make each submenu go up a little bit, but then they all started popping up near the bottom.

I dont understand how to fix this, and to make things worse, im not sure how to keep up with this seemingly arbitrary results, or the rules that determine them.

If it makes any difference, my menu items and sub menus arent written in static html, theyre the result of a mysql query which puts each of every category's children inside an unordered list within that item's list.

Here is my other pertinent css code. The problem may very well be somewhere here.

#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;

}

Any help or insight would be greatly appreciated!

Answer 1

您必须给出position: relative对于您的li