0

ナビゲーション メニューでサブメニューが表示されません。ナビゲーションバーIDのcssのoverflow:hidden行と関係があることは知っていますが、それを削除すると、ページコンテナは魔法のように大きなパディングを取得します

これが私のコードです：

<div id="pagecontainer">
<div id="header">
    <div id="navmenu">
        <div id="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li class="doctool"><a href="#">Docs and Tools</a>
                    <ul>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                    </ul></li>
                <li class="spacer"></li>
                <li><a href="#">Contacts</a></li>
                <li class="last"><a href="#">OnCore</a></li>
                </ul>
         </div>
    </div>  
<!-- Close Header --></div>
<div class="container">
  <div id="Footer"></div>

css を適切に配置するのに問題があるので、これが私の , jsfiddleへのリンクです

4

2 に答える 2

1

から削除overflow:hidden;します#navmenu

#navmenu次に、マージンを使用してパディングを使用する代わりに、次のようにします。

#navbar{
  padding-top:132px;
  width:700px;
  height:40px;
  padding-left:140px;
}

更新されたフィドル: http://jsfiddle.net/DYF6U/

これは、マージンが互いに崩壊し、親を押し下げることに関係していると思います。私が間違っている場合は、誰かが私を修正してください。

http://www.w3.org/TR/css3-box/#collapsing-marginsに興味がある場合は、マージンの縮小に関するドキュメントを次に示します。

お役に立てれば。

于 2013-10-31T03:36:40.700 に答える
1

これがページのレイアウトにどのように影響するかはわかりませんが、#navmenu の高さを高くすると、サブメニューが途切れなくなります。

JSフィドル

コード調整:

#navmenu {
  margin: auto;
  overflow: hidden;
  padding: 0;
  width: 980px;
  background-image:url('https://dl.dropboxusercontent.com/u/3876653/header.png');
  background-repeat: no-repeat;
  background-position: center top;
  height:300px; /*Edit this value to allow room for sub menu items*/
}

ナビゲーション バーのすぐ下に押し下げられる要素がある場合は、それに応じて調整する必要があります。

于 2013-10-31T03:37:12.963 に答える