Nested UL/LI not shown

Question

<ul id="nav">
    <div id="navspacer" />
    <li class="button" style="width: 109px;"></li>
    <li class="button" style="width: 86px;">
        <img alt="Webdesign" src="images/digifolio_10.jpg"/>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
</ul>
<div id="main">
    content
</div>

li.button has a fixed height:

li.button {
    height:             23px;
    float:              left;
    list-style:         none;
}

div#main has a z-index of 0

li.button ul has a z-index of 100:

li.button ul {
    z-index:            100;
    background-color:   #ffffff;
    display:            block;
}

But it just isn't shown in the browser... Firebug shows it's there, but it just isn't displayed.

Answer 1

Keep in mind that z-index does not apply to elements without the position-property, so it has no effect on your code.

And DIV is not allowed within UL. Use margins or paddings instead.

Answer 2

It would be helpful to see all of your css. Do you have overflow:hidden declared on li somewhere?

You have the height of li.button to be 23px but the ul in it will be much taller. Unless you are also floating the inner li's and img left in which case it will be wider than 86px.