1

私はこのメニュー構造を持っています:(内部<ul>タグはカスタムで囲むことができますが<div>、コードはPHPで記述された動的モジュールシステムから生成されるため、他のすべての構造変更ははるかに困難です）

<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">Sub-Item 1</a>
                    </div></li>
                    <li class=""><div class="body-menu">
                        <a href="bla">Sub-Item 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>

目標は、<ul>アイテム1の後の内側を、他のトップレベルアイテムの上部ではなく、サブメニューとして左側に表示することです。

構造を変更せずにそれを行う方法はありますか？CSSかそこらだけで？

アップデート：

すべての答えに感謝します！

特にbesluitloosとCaeleaにとって、それはまさに私が探しているものです。

4

3 に答える 3

0

<li>2番目を含む親<ul>は相対的に配置され、含まれる親は<ul>絶対的に配置される必要があります。

のような何か：

ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;}

私は書きleft: 145pxましたが、メニューの大きさに応じて、任意の値を指定できます。

PS：ヒント：これらのdivで同じ「body-menu」クラスを使用しないでください。大きなコンテナーだけでなく、異なるクラスにする必要があります。そして、私はそれらの中にそのdivを持っている必要は本当にないと思います< li >。

于 2012-09-17T12:20:17.873 に答える
0 
.body-menu > ul > li {
 position:relative;
 float:left;
 padding-bottom: 1em;
}
.body-menu ul ul {
 position:absolute;
 left:0;
 top:1.3em;
 display:none;
}
.body-menu > ul > li:hover > ul {
 display:block;
}

それはあなたが探しているものですか？

編集：申し訳ありませんが、IEはインラインブロックでうまく機能しません。したがって、これを「インライン」に変更する必要があります。次に、インライン要素では機能しないため、下部のパディングを省略できます。要素をフロートする場合を除きます。上記のコードをfloatで動作するように編集しました。

編集2：タイプミス。

于 2012-09-17T12:24:11.373 に答える
0

おそらく、サブメニューを非表示にして、マウスをホバーしているときにポップアップまたは表示するようなことをしたいと思うでしょう。例については、http：//cssmenumaker.com/builder/42231を参照してください。

于 2012-09-17T12:25:45.100 に答える