0

以前にもっと基本的な質問をしましたが（内側のタグを別の位置に配置するにはどうすればよいですか？）、完全に答えられました。しかし、私はより深いサブレベルを忘れました。基本的な問題は、トップレベルのアイテムがサブレベルのものとはページ上の異なる位置に表示されることです。

したがって、構造は次のようになります。

<div id="menu">
    <div class="body-menu">
        <ul>
            <li class="current"><div class="body-menu">
                <a href="bla">Item1</a>
                <ul>
                    <li class="current"><div class="body-menu">
                        <a href="bla">Item 1.1</a>
                        <ul>
                            <li class=""><div class="body-menu">
                                <a href="bla">Item 1.1.1</a>
                            </div></li>
                            <li class="current deepest-menu"><div class="body-menu">
                                <a href="bla">Item 1.1.2</a>
                            </div></li>
                        </ul>
                    </div></li>
                    <li class=""><div class="body-menu">
                        <a href="bla">Item 1.2</a>
                    </div></li>
                </ul>
            </div></li>
            <li class=""><div class="body-menu">
                <a href="bla">Item 2</a>
            </div></li>
        </ul>
    </div>
    <div class="menu-background"></div>
</div>

このコードを使用して、左側のメニューにサブレベルのものを表示し、元の位置にトップレベルを表示するという基本的な問題を修正しました（トップメニュー）

.body-menu > ul > li {
 position:relative;
 padding-bottom: 1em;
}
.body-menu ul ul {
 position:absolute;
 left:10px;
 top:30px;
}

しかし今、レベル1.1.1のアイテムは1.1のものの上に表示されています...

これに対する簡単な解決策はありますか？

いつもあなたの助けに感謝します！--クリスラー

アップデート

css stuff http://jsfiddle.net/crisler/wZrVS/（単純） http://jsfiddle.net/crisler/pMTHX/1/（その他のアイテム..）ほとんどが大学のcssからのものであるため、少し混雑していますファイル..私がすべてを手に入れたことを願っています

4

1 に答える 1

0

代わりにこのCSSを使用してください：

.body-menu ul ul.second-level {
    position:absolute;
    left:10px;
    top:30px;
}

そして、最初のレベルのアイテム（つまり、アイテム1、アイテム2、...）の直後にネストされているsecond-levelすべてのにクラスを追加します。ul

<a href="bla">Item1</a>
    <ul class="second-class">

問題は、そのCSSルールをコード内のすべてのサブリストに適用していることです。この変更により、リストの第2レベルにのみ影響し、残りは正常に動作します。

結果は次のとおりです。

ネストされたリスト

そしてこれは編集されたフィドル（より多くのアイテムがあるもの）です：http：//jsfiddle.net/pMTHX/2/

于 2012-09-18T07:19:07.797 に答える