المتداخل 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 # الرئيسية لديه z- مؤشر 0

li.button ul. لديه z- مؤشر 100:

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

لكنه لا يظهر فقط في المتصفح ... Firebug يظهر أنه موجود، لكنه لم يتم عرضه فقط.

Answer 1

ضع في اعتبارك أن مؤشر Z لا ينطبق على العناصر بدون position-property، لذلك ليس لها تأثير على التعليمات البرمجية الخاصة بك.

والحمات غير مسموح بها داخل ul. استخدام الهوامش أو الحائد بدلا من ذلك.

Answer 2

سيكون من المفيد رؤية كل CSS الخاص بك. هل لديك تجاوز: مخفي أعلن على لي في مكان ما؟

لديك ارتفاع li.button ليكون 23px ولكن ul في ذلك سيكون أطول بكثير. ما لم تكن قد تطفو أيضا إلى Li's و IMG الداخلية في هذه الحالة، فستكون أوسع من 86 بكسل.