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

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

div#главный имеет z-индекс, равный 0

li.кнопка ul имеет z-индекс, равный 100:

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

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

Answer 1

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

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

Answer 2

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

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