需要帮助设置z-索引下拉菜单

Question

在我的站点brain.hostug.com我添加了另一个CSS菜单，但是第一个(在顶部)在创建一个小问题。顶部的第一个菜单有一个"关于HostUG"，它有一个小的下拉列表。在第一个菜单下方添加第二个菜单后，每当我将鼠标悬停在第一个菜单的"关于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;
}

Answer 1

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

Answer 2

add position: relative; to . siteheader。这将是完美的。

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