Question

我有一个包含3个leve的菜单（顶级＆gt;子级别1＆gt;次级2），我想在同一位置显示子级别1，与该子菜单的顶级菜单的位置无关。除此之外，我希望子级别2旁边的子级别2悬停在子级别1项目上。也许听起来有点混乱所以我快速 mockup 和 JSFiddle Demo

在模型中你可以看到如果我在项目3和子项目3上盘旋它应该是什么样子。我已经知道了，除了彼此之外我还有2个子菜单级别，而第二个子级别仅在悬停第一个子级别时出现。但是我无法得到它以便我可以在没有消失的情况下进入第二个子级别，并且将所有子菜单放在同一个位置的最佳方法是什么？

我目前拥有的HTML：

<div class="menu-main-container">
    <ul id="menu-main" class="menu">
        <li id="menu-item-1"> <a href=#>Item1</a>

        </li>
        <li id="menu-item-2"> <a href=#>Item2</a>

            <ul class="sub-menu">
                <li id="menu-item-5"> <a href="#">Sub Item 1</a>

                </li>
                <li id="menu-item-6"> <a href="#">Sub Item 2</a>

                </li>
                <li id="menu-item-7"> <a href="#">Sub Item 3</a>

                    <ul class="sub-menu">
                        <li id="menu-item-8"> <a href="#">Sub Sub Item 1</a>

                        </li>
                        <li id="menu-item-9"> <a href="#">Sub Sub Item 2</a>

                        </li>
                        <li id="menu-item-10"> <a href="#">Sub Sub Item 3</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="menu-item-3"> <a href=#>Item3</a>

        </li>
        <li id="menu-item-4"> <a href=#>Item4</a>

        </li>
    </ul>
</div>

和CSS：

.menu-main-container > ul {
    text-align : left;
    display : table;
    list-style : none;
    text-transform : capitalize;
    text-decoration : none;
    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;
}
.menu-main-container ul > li {
    text-align: left;
}
.menu-main-container > ul > li {
    display : table-cell;
    position : relative;
    cursor : pointer;
    vertical-align : middle;
    text-align : center;
}
.menu-main-container ul li a {
    text-transform : capitalize;
    text-decoration : none;
    color : #000000;
    font-weight : bold;
    font-size : 16px;
}
/*sub menu level 1*/
 .menu-main-container > ul > li:hover {
    background-color : #003cb3;
}
.menu-main-container > ul > li:hover > a {
    color : #fff;
}
.menu-main-container > ul > li > ul {
    position : absolute;
    top : 100%;
    width : 615px;
    display : none;
    opacity : 0;
    visibility : hidden;
    background-color : #FFFFFF;
}
.menu-main-container > ul > li > ul > li {
    display : block;
    color : #000000;
    width : 227px;
    padding-right : 0;
    list-style-type : none;
}
.menu-main-container ul li ul li a {
    width : 227px;
}
.menu-main-container ul li ul li:hover a {
    color : #003399;
    /*padding: */
}
.menu-main-container ul li ul li:hover {
    background-color : #FFFFFF;
}
.menu-main-container ul li:hover ul {
    display : block;
    opacity : 1;
    visibility : visible;
}
/*sub menu level 2*/
 .menu-main-container ul li:hover ul li ul {
    position : absolute;
    top : 0;
    left : 247px;
    width : 247px;
    display : none;
    opacity : 0;
    visibility : hidden;
}
.menu-main-container > ul > li > ul > li > ul > li {
    list-style-type : none;
}
.menu-main-container ul li:hover ul li ul li {
    border : none;
    width : 227px;
    margin-right : 0;
}
.menu-main-container ul li:hover ul li:hover ul {
    display : block;
    opacity : 1;
    visibility : visible;
}
.menu-main-container ul li:hover ul li ul li a {
    color : #000000;
}
.menu-main-container ul li:hover ul li ul li:hover a {
    color : #003399;
}

Answer 1

答案是，“......但是我无法理解，所以我可以在没有消失的情况下进入第二级别”： -

我认为这意味着您无法将鼠标光标移动到第二个子菜单。实际上你可以 - 只要你完全水平移动光标，以便留在你在第一个子菜单中悬停的项目。但是当你在鼠标移动过程中向上或向下移动的那一刻（正如你的用户可能会做的那样）你正在移开你正在徘徊的选项，所以第二个子菜单消失了！您需要将菜单彼此相邻放置，中间没有空格以防止这种情况发生。您可以使用绝对定位来执行此操作（即position：absolute）。

子菜单在特定位置

1 个答案: