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 -

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?

KittMedia · Accepted Answer · 2014-06-14 07:49:59Z

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.

answered Jun 14, 2014 at 7:49

KittMedia

7,45613 gold badges36 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

position and float causing unexplainable behaviour in CSS dropdown

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related