0

ネストされたリストのナビゲーションでは、期待どおりに2番目のリストが表示されません（ブロックが垂直方向にリストされています）。代わりに、すべてのアイテムが互いに直接重ねられます。

http://jsfiddle.net/HL69H/3/

<div id="linksLeft">
        <ul class="menu">
            <li class="current"><a href="">about</a></li>
            <li class="current" id="active"><a href="">portfolio</a>
                <ul class="subMenu" id="subNav">
                    <li><a href="">editorial</a></li>
                    <li><a href="">advertising</a></li>
                    <li><a href="">packaging</a></li>
                    <li><a href="">photography</a></li>    
                </ul>
            </li>
        </ul>
    </div>


#nav {
width:48em;
margin:auto;
text-align:center;
padding-top:6em;
list-style-type:none;
}

#outerBox {
margin:0;
padding:0;
}

#linksLeft{
float:left;
border-top:2px solid #93b9bb;
border-bottom:2px solid #93b9bb;
margin-top:60px;
padding:5px 0px;
}

#linksLeft li {
display:inline-block;
padding:0 3em;
position:relative;
}
#linksLeft li ul li {
display:block;
}

#subNav li{
position:absolute;
padding:1em;
left:50%;
/*display:none;*/
}

#linksRight li{
display:inline-block;
padding:0 3em;
position:relative;
}

ここに画像の説明を入力してください

4

2 に答える 2

4

それらposition: absolute;を積み重ねていました。これを相対に変更し、親コンテナで絶対配置を使用して、必要な場所に配置します。

#subNav li{
    position:relative;
    padding:1em;
    left:50%;
    /*display:none;*/
}
于 2012-12-20T18:45:38.317 に答える
1

問題は、「＃subnavli」のCSSです。適用するスタイルは、ulには必要ですが、liには必要ありません。

CSS

#subNav {
    position:absolute;
    padding:1em;
    left:0;
    /*display:none;*/
}

#menu li{
    position:relative;
}

それはあなたが望むものを与えます

于 2012-12-20T18:48:07.247 に答える