0

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

谢谢！！ 这是屏幕截图，如果您需要查看

这是顶部导航的 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;
}
4

2 回答 2

1

position: relative从规则中删除#cssmenu ul。我看不出它有什么真正的意义。

于 2013-06-01T08:58:44.137 回答
0

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

那是

.siteHeader {
position: relative;
z-index: 4;
width: 100%;
height: 90px;
font: 13px "Droid Sans","Helvetica Neue",Helvetica,sans-serif;
}
于 2013-06-01T09:00:11.663 回答