html - 特定位置的子菜单

Question

我有一个具有 3 级的菜单(顶级 > 子级 1 > 子级 2)，我想在与该子菜单的顶级菜单的位置无关的相同位置显示子级 1。除此之外，当鼠标悬停在子级别 1 元素上时，我希望子级别 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)。