css - z-index 和溢出不适用于下拉菜单和 slider

Question

我有一个带有标准下拉菜单和菜单正下方 slider 的页面。问题是当菜单展开时，它出现在 slider 下方。

这是 HTML 结构:

<div id="header">
<header id="branding" role="banner">
    <hgroup>
        <nav id="access" role="navigation">
            <div class="menu-primary-navigation-container">
                <ul id="menu-primary-navigation" class="menu">...</ul>
            </div>
        </nav>
    </hgroup>
</header>
</div>

<div id="main">
    <div id="primary">
        <div id="content" role="main">
            <div id="jj-nexgen-jquery_slider-5">
                <ul class="ul_jj_slider">

这是 CSS:

#header {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 -2000px;
    padding: 0 2000px;
}

#branding {
    padding-bottom: 12px;
    position: relative;
    z-index: 9999;
    overflow: hidden;
    margin: 0 12.3%;
}

#access {
display: block;
float: right;
padding-top: 18px;
}

#access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
}

#access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;

我错过了什么？如果我从 branding 元素中删除 overflow 属性，它会起作用，但标题背景和填充将不再起作用。

问题可以看这个website .

Answer 1

您好，只需删除 #branding div 中的 overflow hidden 并在此处添加 float left

请参阅下面提到的 CSS :-

#branding{
overflow:hidden; // remove this line
float:left; // add this line
}