Css 需要帮助为下拉菜单设置z索引吗

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

谢谢！！

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

---

将

位置：相对
从规则
#cssmenu ul
中删除。我看不出它有什么真正的意义。
添加
位置：相对到.siteHeader。这将是完美的

就是

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

谢谢你现在没关系：）