position and float causing unexplainable behaviour in CSS dropdown

Question

I found the code for a dropdown here on stackoverflow and was playing with it.

Please take a look at the following jsfiddle -

http://jsfiddle.net/ArF8q/

• The first menu - .menu is a normal dropdown menu that I found on SO .
• The second one - .menu2 has been modified by me.

When I remove position:relative from -

.menu ul li {
    display: block;
    position: relative;
    float: left;
}

and remove float:none -

.menu li:hover li {
    float: none;
    font-size: 11px;
}

from .menu I get the .menu2 which shows the dropdown in a horizontal manner.

I'm unable to understand why. I would assume that simply removing float:none would have made the li appear side by side, but we have to remove position:relative as well to achieve that effect. Why is that?

Answer 1

The second ul is positioned absolute and inside the first li element, which is positioned relative. This causes that the ul is not dependent on the body element but on the li element. Thus it cannot be longer than the width of the li element so that everything inside this ul element is positioned as it is possible in the width of the li element.

Thus the problem is not the second level li element but the first level one.

You can work with the > selector to make a difference between the first level li and the second level one.