0
我有一个3 leves（顶级>次级1>次级2）的菜单，我想显示子级别1在独立于顶级菜单位置的同一位置该子菜单。除此之外，我希望在子级别1项目上悬停时，子级别1旁边的子级别2。也许听起来有点混乱，所以我做了一个快速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;
}