0
3 개의 leves (최상위> 하위 수준 1> 하위 수준 2)가있는 메뉴가 있는데 최상위 메뉴의 위치와 관계없이 같은 위치에 하위 수준 1을 표시하려고합니다. 그 하위 메뉴. 게다가 나는 하위 레벨 1 옆에있는 하위 레벨 2를 원한다. 어쩌면 약간은 내가 만든 혼란 사운드 빠른 당신이 내가 항목 3 하위 항목 맴돌고 경우 어떻게 보일지 알 수 mockup과 모형에서 JSFiddle Demo특정 위치의 하위 메뉴
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;
}