z-index＆overflow不能使用下拉菜单和滑块

Question

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

这是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元素都有溢出隐藏，并切断你的菜单。 为了避免这种情况，品牌元素必须浮动。

当然这打破了#header。解决方法是让这个浮动以及宽度调整边距和填充：

background: #fff; margin: 0 -38px; padding: 0 38px; float: left;

Answer 2

嗨只是删除overflow hidden在#branding DIV，并添加float left这里

看到下面提到CSS： -

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