5

私はドロップダウンメニューに取り組んでいます。私が直面している問題は、私は の 3 レベルを持っていることです<ul>.2 番目のレベルでは、別のレベルに対応していたために の高さが<li>増加すると、2 番目のレベル<ul>の他のすべてがそれ<li>を包み込みません.

このFiddleで状況を視覚化できます

マウスをテクノロジーの上に置くと、タイポグラフィとフロントエンドが下に下がっているため、 Web デザイン <li>のサイズが大きくなっていることがわかります。それらを包み込み続ける方法はありますか？<ul>

HTML 構造は次のようになります。

<nav id="nav" role="navigation">
<ul class="clearfix">
    <li> <a href="?work"><span>Technology</span></a>
        <ul>
            <li><a href="#">Hot news</a></li>
            <li><a href="#">Sad news</a></li>
            <li><a href="#">Normal news</a></li>
            <li><a href="?webdesign">Web Design</a>
                <ul>
                    <li><a href="#">Super power</a>
                    </li>
                    <li><a href="#">Aim Gain</a>
                    </li>
                    <li><a href="#">Acheivers</a>
                    </li>
                    <li><a href="#">Lackers</a></li>
                </ul>
            </li>
            <li><a href="?typography">Typography</a>
            </li>
            <li><a href="?frontend">Front-End</a>
            </li>
        </ul>
    </li>
    <li><a href="?about">Personal Stuff</a>
    </li>
</ul>

編集:いくつかのスクリーンショットを添付 この画像は現在の問題を示しています。タイポグラフィとフロントエンドの位置を参照してください

この画像は私が直面している問題を示しています。 **タイポグラフィ** と **フロントエンド** を参照してください。

次の画像は、私が達成しようとしていることを示しています。タイポグラフィとフロントエンドの位置を参照してください

この画像は、私が達成しようとしていることを示しています。 **タイポグラフィ** と **フロントエンド** を参照してください。

4

1 に答える 1

1

どうぞ: JSFiddle

UPD :スクリーンショットに準拠した JSFiddle (CSS ルールを更新する必要があります)

UPD :クラスに基づく JSFiddle の例

margin-left:20px;オンを削除しました#nav li ul li > ul

Safari 6.1 (Mac OS X 10.9) でテスト済み | UPD : Mac OS X 10.9 の Chrome (30) および FF (23.0.1) でさらにテスト済み

于 2013-10-24T14:59:53.530 に答える