You had this css
selector, .sf-menu ul
which at first I was under the impression that it was adding absolute
to all of the ul
s.
I then changed it to, .sf-menu > ul
so it is specifically targeting the ul
s inside of .sf-menu
.
.sf-menu > ul {
position: absolute;
top: 100%;
left: 0;
z-index: 99;
}
After looking over all of the css
I am not 100%
sure why it fixed it exactly. You have some duplication of your classes and such in your css
so I am not to sure.
One reason it was not expanding correctly is due to the fact of position: absolute
. They are taken outside of the element as if it was not in there at all like floating but worse.
My best educated guess would be that without the >
it was applying position: absolute
to the class .sf-menu
. This would take the entire nav out of the workflow and wouldn't make the parent expand to the content.
Now the absolute divs are relative to .sf-menu
's li
s and since the li
are relatively positioned the parent can fill to them.
Here is the JSFIDDLE to see it in action.