导航下拉菜单不显示使用简单的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

回答

相关问题