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;
}