Why won't my <UL> expand to wrap the <LI> elements it contains?

I'm using WordPress. I have a menu that is built with a list.

Basically, its sample is like this:

<ul>
    <li>FrontPage</li>
    <li>MenuItem</li>
    <li>ParentMenuItem
        <ul> <--- This wont adjust its height to fit its children
            <li>MenuItemChild</li>
            <li>MenuItemChild</li>
        </ul>
    </li>
    <li>MenuItem</li>
</ul>

Now the ParentMenuItem won't expand and cover all its children with its background and border. I cant figure out why. Only way I have been able to make it cover is by giving it a fixed height.

Answers


Change the height of your ul from 100% to auto:

height: auto;

The reason your ul height is too small is because you are using 100%, which means it will take on the height of its parent. It does not mean to take up the maximum space available, nor does it mean to take on the sum of the height of all its children. Since the parent has height: 33px, your ul also has that height.


In this rule

.menu-primary-container ul li ul {
    height: 100%;
    /* ... */
}

you must remove height.

And you must rename the selector

.menu-primary-container ul

to

.menu-primary-container > ul

in order to affect only first ul, not all descendants.


It's because your <li>'s are floated left, which means they don't give any form to the containing element.

If you set the nested <li> to float: none; clear: both; it should fix the problem.


Need Your Help

Where did the bower-angular-bootstrap3 repository move to?

angularjs yeoman bower

I am getting a page not found error when trying to access the bower-angular-bootstrap3 repository: https://github.com/paptamas/bower-angular-bootstrap3.git/