AronChan AronChan - 7 months ago 16
CSS Question

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> <--- This wont adjust its height to fit its children

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.


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.