Вложенный UL / LI не показан

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 имеет фиксированную высоту:

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

div # main имеет z-индекс 0

li.button ul имеет z-индекс 100:

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

Но он просто не отображается в браузере ... Firebug показывает, что он есть, но он просто не отображается.

Answer 1

Было бы полезно увидеть все ваши css. У вас есть переполнение: скрыто объявлено где-нибудь в li?

Вы имеете высоту кнопки li.n быть 23px, но ul в ней будет намного выше. Если только вы не перемещаете внутренние li и img влево, в этом случае он будет шире 86px.

Answer 2

Помните, что z-index не применяется к элементам без свойства position, поэтому он не влияет на ваш код.

И DIV не допускается в пределах UL. Вместо этого используйте поля или отступы.