0

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

这是 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;

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

这个问题可以在这个网站上看到。

4

2 回答 2

3

嗨，只需overflow hidden在您的 #brandingdiv 中删除并在float left此处添加

请参阅下面提到的CSS：-

#branding{
overflow:hidden; // remove this line
float:left; // add this line
}
于 2012-08-17T11:53:03.720 回答
1

父#branding元素隐藏了它的溢出并切断了您的菜单。为了避免这种情况，品牌元素必须浮动。

当然，这打破了#header. 解决方法是使此浮动以及宽度调整的边距和填充：

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

于 2012-08-17T12:04:20.493 回答