Question

我正在为网页创建一个topmenu，并且通过脚本编写，子菜单会在悬停时弹出。我还采取措施，不让菜单向右移动太远，如果需要，让它向另一个方向发展。这张照片澄清了：

enter image description here

我是通过将子类“to-the-left”添加到子子菜单来实现的。

现在，为什么父子菜单项在子子菜单的顶部？您可以阅读“子项目2”下面的“项目3”，这是不可能的。

我试图将z-index添加到子子菜单而不成功。

<!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>

Answer 1

这是因为元素的顺序很重要：代码后面的元素位于前面的元素之上。

在您的情况下，子库是主要商品2＆gt;＆gt;的一部分。之后是第3项之后。

您可以使用z-index覆盖子菜单（不是子子目录）：

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

更新小提琴：http://jsfiddle.net/VK7Mt/3/

Answer 2

将z-index添加到：

ul.topmenu ul ul.to-the-left {
    z-index: 100;
}

这就是说你希望ul在其他元素前面。它具有绝对位置，因此需要一些z指数。

JSFIDDLE

亲李与孩子李重叠，有绝对的uls，相对lis

2 个答案: