tags:

views:

300

answers:

2
<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.

+1  A: 

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.

Arve Systad
position: relative on the nested UL fixed it. thanks for the tip about the div as well, it has been fixed :)
+1  A: 

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.

Emily