Question

在我的网站brain.hostug.com我添加了另一个CSS菜单，但第一个（在顶部）创建了一个小问题。顶部的第一个菜单有一个“About HostUG”li，它有一个小的下拉列表。在第一个菜单下面添加第二个菜单后，每当我将鼠标悬停在First Menu的“About HostUG”上时，它会显示下拉菜单，但这些选项显示在第二个菜单后面。我知道css中的z-index，但不知道如何正确使用它。任何人都可以访问https://brain.hostug.com并查看右上方的菜单。

谢谢!! This is the screenshot if you need to see

这是顶部导航的CSS。

.siteHeader .navigation
{
    float: right;
    margin:0px; padding:0px;
}

.siteHeader .navigation li
{
    float: left;
    margin: 20px 0;
    list-style-type:none;
}

.siteHeader .navigation li a
{
    display: block;
    line-height: 15px;
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #000;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: background 200ms, color 200ms;
    -moz-transition: background 200ms, color 200ms;
    text-decoration:none;
}

.siteHeader .navigation li a.dropdown
{
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.siteHeader .navigation li a span
{
    font-size: 11px;
    color: #999;
    text-transform: none;
}

.siteHeader .navigation li:hover a
{
    padding: 9px 19px;
    color: #fed327;
    text-decoration: none;
    background: #222;
    border: 1px solid #000;
    -webkit-box-shadow: inset 0 1px 0 #383838;
    -moz-box-shadow: inset 0 1px 0 #383838;
    box-shadow: inset 0 1px 0 #383838;
}

.siteHeader .navigation li:hover a.dropdown
{
    padding: 9px 19px 10px 19px;
    border-bottom: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.siteHeader .navigation li ul.dropdown
{
    display: none;
    position: absolute;
    overflow: hidden;
    width: 240px;
    border: 1px solid #000;
    border-top: 0;
    padding:0px;
    -webkit-border-radius: 6px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 6px;
    -moz-border-radius-topleft: 0;
    border-radius: 6px;
    border-top-left-radius: 0;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.siteHeader .navigation li ul.dropdown li
{
    float: none;
    margin: 0;
}

.siteHeader .navigation li ul.dropdown li a
{
    padding: 15px 20px;
    color: #fff;
    text-transform: none;
    background: #222;
    border: 0;
    border-top: 1px solid #000;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.siteHeader .navigation li ul.dropdown li:first-child a
{
    -webkit-border-top-right-radius: 6px;
}

.siteHeader .navigation li ul.dropdown li a:hover
{
    color: #fed327;
    background: #333;
    -webkit-box-shadow: inset 0 3px 6px #191919;
    -moz-box-shadow: inset 0 3px 6px #191919;
    box-shadow: inset 0 3px 6px #191919;
}

.siteHeader .navigation li:hover ul.dropdown
{
    display: block;
}

Answer 1

从规则position: relative中删除#cssmenu ul。我没有看到它的任何实际意义。

Answer 2

将position: relative;添加到.siteHeader。这将是完美的。

那是

.siteHeader {
position: relative;
z-index: 4;
width: 100%;
height: 90px;
font: 13px "Droid Sans","Helvetica Neue",Helvetica,sans-serif;
}

需要帮助为下拉菜单设置z-index

2 个答案: