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と機能しますが、ヘッダーの背景とパディングは機能しなくなります。

この問題は、このWeb サイトで確認できます。

4

2 に答える 2

3

Hi just remove overflow hidden in your #branding div and add float left here

see the mentioned below 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 に答える