I found the code for a dropdown here on stackoverflow and was playing with it.
Please take a look at the following jsfiddle -
.menu
is a normal dropdown menu that I found on SO. .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?
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.