0

Web ページのトップメニューを作成しています。スクリプトを使用すると、ホバー時にサブメニューがポップアップします。また、メニューが右に大きくなりすぎないように、必要に応じて反対方向に大きくするようにしました。この図は次のことを明確にしています。

ここに画像の説明を入力

サブサブメニューに「to-the-left」クラスを追加することでこれを行います。

親のメニュー項目の一部がサブ サブ メニューの上にあるのはなぜですか? ありえないはずの「サブサブアイテム2」の下に「アイテム3」が読めます。

サブサブメニューに z-index を追加しようとしましたが成功しませんでした。

http://jsfiddle.net/VK7Mt/

<!doctype html>
  <html>
    <head>
        <style type="text/css">
            div.top-menu
            {
                    width: 920px;
                    margin: 0 auto;
            }

            div.top-menu ul.topmenu
            {
                    margin: 0;
                    height: 41px;
                    background: #ccc;
                    padding: 0;
                    position: relative;
            }

            ul.topmenu li
            {
                    list-style: none;
                    float: left;
                    padding: 12px 19px;
                    min-height: 17px;
                    position: relative;
            }

            ul.topmenu ul
            {
                    width: 190px;
                    position: absolute;
                    top: 41px;
                    left: 0;
                    margin: 0;
                    padding: 0;
                    background: #dddddd;
                    border: #c4c4c4 1px solid;
            }

            ul.topmenu ul li
            {
                    float: none;
                    padding: 3px 6px 3px 13px;
            }

            ul.topmenu a
            {
                    color: #333;
                    text-decoration: none;
            }

            ul.topmenu ul li a
            {
                    display: inline-block;
                    font-weight: normal;
                    width: 90%;
            }

            ul.topmenu ul li:hover
            {
                    background: #3399cc;
            }

            ul.topmenu ul ul
            {
                    left: 100%;
                    top: 0;
            }

            ul.topmenu div
            {
                    cursor: pointer;
            }

            .topmenu-sub-item > .item
            {
                    padding-left: 6px;
            }

            .topmenu-sub-item > .item > a
            {
                    margin-top: 3px;
                    margin-bottom: 3px;
            }

            ul.topmenu ul ul.to-the-left
            {
                    left: -100.5%;
            }
        </style>
    </head>
    <body>
    <div class="top-menu">
        <ul class="topmenu">
            <li class="topmenu-root-node">
            <a href="foobar.html">root item</a>
            <ul class="topmenu-submenu-container">
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item1">item 1</a>
                </div>
                </li>
                <li class="topmenu-sub-item nonempty">
                    <div class="item has-submenu">
                        <a class="topmenu-hassubmenu" href="/item2">item 2</a>
                    </div>
                    <ul class="topmenu-submenu-container to-the-right">
                        <li class="topmenu-sub-item nonempty">
                            <div class="item has-submenu">
                                <a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
                            </div>
                            <ul class="topmenu-submenu-container to-the-right">
                                <li class="topmenu-sub-item nonempty">
                                    <div class="item has-submenu">
                                        <a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
                                    </div>
                                </li>
                                <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem2">Sub sub item 2</a>
                                </div>
                            </li>
                            <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem3">Sub sub item 3</a>
                                </div>
                            </li>
                        </ul>
                        </li>
                    </ul>
                </li>
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item3">Item 3</a>
                </div>
                </li>
            </ul>
            </li>
        </ul>
    </div>

    <div class="top-menu" style="margin-top: 170px">
        <ul class="topmenu">
            <li class="topmenu-root-node">
            <a href="foobar.html">root item</a>
            <ul class="topmenu-submenu-container">
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item1">item 1</a>
                </div>
                </li>
                <li class="topmenu-sub-item nonempty">
                    <div class="item has-submenu">
                        <a class="topmenu-hassubmenu" href="/item2">item 2</a>
                    </div>
                    <ul class="topmenu-submenu-container to-the-right">
                        <li class="topmenu-sub-item nonempty">
                            <div class="item has-submenu">
                                <a class="topmenu-hassubmenu" href="/subitem1">Sub item 1</a>
                            </div>
                            <ul class="topmenu-submenu-container to-the-left">
                                <li class="topmenu-sub-item nonempty">
                                    <div class="item has-submenu">
                                        <a class="topmenu-hassubmenu" href="/subsubitem1">Sub sub item 1</a>
                                    </div>
                                </li>
                                <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem2">Sub sub item 2</a>
                                </div>
                            </li>
                            <li class="topmenu-sub-item">
                                <div class="item">
                                    <a href="/subsubitem3">Sub sub item 3</a>
                                </div>
                            </li>
                        </ul>
                        </li>
                    </ul>
                </li>
                <li class="topmenu-sub-item">
                <div class="item">
                    <a href="/item3">Item 3</a>
                </div>
                </li>
            </ul>
            </li>
        </ul>
    </div>
    </body>
</html>
4

2 に答える 2

2

これは、要素の順序が重要であるためです。コード内で後から来る要素は、前の要素の上にあります。

あなたの場合、サブサブはメインのアイテム 2 の一部です >> その後のアイテム 3 の下にあります。

サブメニュー (サブサブではない) の z-index を使用して、これをオーバーライドできます。

ul.topmenu ul {
  ...
  position:absolute;
  z-index:999;
  ...
}

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

于 2013-10-25T09:19:04.687 に答える