Question

I am trying to do a vertical dropdown menu. This is my code

.menu li:hover>ul{
position:absolute;
display:inline;
    left:120px;
    top:100px;}

I use position: Absolute to remove the sub-menu from the table, once the menu gets hovered. It appears that, if I do not indicate top or left property. The sub-menu will displayed relatively. Now I need to adjust the position relatively but seems that only the left property works. So my sub-menu left position is 120px relatively away from its original position. But the top is 100px away from the top of the window, rather then to the original position. How do I move the list up relative to it original position? I cant use position:relative because I need the sub-menu to be remove from the table.

Answer 1

You need to give it’s container a relative position, like this:

.menu li:hover { position: relative; }

This way the positioning of the <ul> inside is absolute, but relative to this container instead of the entire window, which seems to be what you’re after.