2

私のセットアップでは、ナビゲーション バーを水平に設定し、次のようにヘッダー div 内に含めています。

<div id="header-section">
    <div id="main-menu-wrapper">
        <ul id="main-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Services</a>
                <ul id="sub-men">
                    <li><a href="#">Service 1</a></li>
                    <li><a href="#">Service 2</a></li>
                    <li><a href="#">Service 3</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

私の問題は、「main-menu-wrapper」の高さが自動に設定されているため、サブメニューが表示されないことです。100px などの高さを設定すると、サブメニューが表示されます。サブメニューの位置を絶対ではなく静的に設定すると、メインメニューラッパー全体が展開されます。サブメニューを正しく表示するにはどうすればよいですか?

ヘッダー セクション全体の CSS 部分は次のとおりです。

#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}

#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}

#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}

#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}

#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}

#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}

#main-menu li ul {
position: absolute;
display: none;
}

#main-menu li ul li{
float: none;
}

#main-menu li:hover ul {
display: block;
}

#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}

#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}


#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}

#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}

#logo {
max-width: 600px;
height: auto;
}
4

2 に答える 2

1

ここであなたが何を求めているのか少し混乱していますが、メニューが表示される場所にフィドルを作成しました.

#main-menu-wrapper のスタイルを削除し、#header-section の背景色を削除しました。

これが適切な出発点になることを願っています：http://jsfiddle.net/44vRN/

#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
于 2012-12-13T20:16:22.150 に答える
0

サブメニューで絶対配置を使用して、ドキュメント フローから削除することができます。

于 2012-12-13T20:10:42.057 に答える