導航下拉菜單不顯示使用簡單的CSS和HTML

我有一個下拉菜單列表在CSS和普通HTMl。它工作正常，但它在我的圖像滑塊下滾動，當我將鼠標懸停在我的任何菜單上時，我可以在菜單的一部分中看到它。我認爲z-index屬性在某處丟失。但我用我的UL標籤但沒用。導航下拉菜單不顯示使用簡單的CSS和HTML

HTML

<ul id="menu"> 
        <li><a href="">Home</a></li> 
        <li><a href="">About Us</a> 
        <ul> 
        <li><a href="">The Team</a></li> 
        <li><a href="">History</a></li> 
        <li><a href="">Vision</a></li> 
        </ul> 
        </li> 
        <li><a href="">Products</a> 
        <ul> 
        <li><a href="">Cozy Couch</a></li> 
        <li><a href="">Great Table</a></li> 
        <li><a href="">Small Chair</a></li> 
        <li><a href="">Shiny Shelf</a></li> 
        <li><a href="">Invisible Nothing</a></li> 
        </ul> 
        </li> 
        <li><a href="">Contact</a> 
        <ul> 
        <li><a href="">Online</a></li> 
        <li><a href="">Right Here</a></li> 
        <li><a href="">Somewhere Else</a></li> 
        </ul> 
        </li> 
       </ul>

CSS

ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { display: none; } 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { background: #617F8A; } 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #617F8A; } 
li:hover li a:hover { background: #95A9B1; }

來源

2012-07-18 Leroy Mikenzi

請發表問題。一個問題包含一個？ – 2012-07-18 12:25:30

是的，我們需要看代碼。我會在黑暗中拍攝一張照片，並建議您需要使用'z-index'。 – will 2012-07-18 12:25:59

@ will我應該在哪裏添加z-index..in javascript或CSS – 2012-07-18 12:40:34

圖像滑塊具有從Java腳本Z-index屬性。所以它會佔據高優先級。您還需要爲您的導航提供z-index。

你的圖像滑塊有jQuery嗎？比你必須把z-index放在裏面li{z-index:999px;}。

來源

2012-07-18 12:33:10 dsfg

我已編輯我的問題....請檢查 – 2012-07-18 12:37:52

如果將z-index添加到以下類中。

li:hover ul { 
    display: block; 
    position: absolute; 
    z-index:1000; 
}

同時確保了Z-指數爲菜單具有較高性能。

來源

2013-09-03 18:10:49 Avdhut

導航下拉菜單不顯示使用簡單的CSS和HTML

回答

相關問題