css - 父 li 与子 li 重叠，具有绝对 uls，相对 lis

Question

我正在为网页创建一个顶级菜单，并且通过脚本，子菜单会在悬停时弹出。我还采取措施不让菜单向右增长太远，如果需要，让它向另一个方向增长。这张图说明了：

在此处输入图像描述

我通过将“to-the-left”类添加到子子菜单来做到这一点。

现在，为什么我的子子菜单顶部有一些父菜单项？您可以阅读“Sub sub item 2”下方的“Item 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>

score 2 · Accepted Answer

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

在您的情况下，subsubs 是主要项目 2 >> 的一部分，位于后面的项目 3 之下。

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

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

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

score 2 · Accepted Answer

将 z-index 添加到：

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

这样，您就是说您希望 ul 位于其他元素的前面。它具有绝对位置，因此需要一些 z-index。

JSFIDDLE

css - 父 li 与子 li 重叠，具有绝对 uls，相对 lis

2 回答 2

Related

Reference