下拉菜單懸停重疊

HTML：

<nav id="NavBar"> 
     <ul> 
      <li class="lvl0"><a href="#">[#Heading 1#]</a> 
       <ul> 
        <li class="lvl1" ><a href="#">[#link 1.1#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 1.2#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 1.3#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 1.4#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 1.5#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 1.6#]</a></li> 
       </ul> 
      </li> 
      <li class="lvl0" ><a href="#">[#Heading 2#]</a> 
       <ul> 
        <li class="lvl1" ><a href="#">[#link 2.1#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 2.2#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 2.3#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 2.4#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 2.5#]</a></li> 
        <li class="lvl1" ><a href="#">[#link 2.6#]</a></li> 
       </ul> 
      </li> 
      <li class="lvl0" ><a href="#">[#Heading 3#]</a> 
       <ul> 
        <li class="lvl1" ><a href="#">[#link 3.1#]</a> 
         <ul> 
          <li class="lvl2" ><a href="#">[#link 3.1.1#]</a></li> 
          <li class="lvl2" ><a href="#">[#link 3.1.2#]</a></li> 
          <li class="lvl2" ><a href="#">[#link 3.1.3#]</a></li> 
          <li class="lvl2" ><a href="#">[#link 3.1.4#]</a></li> 
          <li class="lvl2" ><a href="#">[#link 3.1.5#]</a></li> 
          <li class="lvl2" ><a href="#">[#link 3.1.6#]</a></li> 
         </ul> 
        </li> 
         <li class="lvl1" ><a href="#">[#link 3.2#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 3.3#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 3.4#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 3.5#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 3.6#]</a></li> 
        </ul> 
       </li> 
       <li class="lvl0" ><a href="#">[#Heading 4#]</a> 
        <ul> 
         <li class="lvl1" ><a href="#">[#link 4.1#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 4.2#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 4.3#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 4.4#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 4.5#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 4.6#]</a></li> 
        </ul> 
       </li> 
       <li class="lvl0" ><a href="#">[#Heading 5#]</a> 
        <ul class="align-right"> 
         <li class="lvl1" ><a href="#">[#link 5.1#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 5.2#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 5.3#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 5.4#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 5.5#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 5.6#]</a></li> 
        </ul> 
       </li> 
       <li class="lvl0" ><a href="#">[#Heading 6#]</a> 
        <ul class="align-right"> 
         <li class="lvl1" ><a href="#">[#link 6.1#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 6.2#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 6.3#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 6.4#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 6.5#]</a></li> 
         <li class="lvl1" ><a href="#">[#link 6.6#]</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav>

CSS：

#NavBar { 
    width: 1000px; 
} 

#NavBar *{ 
    list-style: none; 
} 

#NavBar ul li{ 
    float: left; 
    padding: 7px 22px 12px; 
    border-left: 1px dashed #dadada; 
    position: relative; 
} 
#NavBar ul{ 
    padding: 0px; 
} 

#NavBar ul li ul{ 
    display: none; 
    left: 0px; 
    width: 403px; 
    margin-top: 12px; 
    padding-top: 10px; 
    box-shadow: 0 1px 1px rgba(85,85,85,0.75); 
    border-top: 1px dashed #dadada; 
} 

#NavBar ul li ul li{ 
    width: 143px; 
    border: 0; 
} 

#NavBar ul li:hover > ul{ 
    display: block; 
    position: absolute; 
} 

#NavBar ul li a{ 
    text-decoration: none; 
    color: #666; 
} 

#NavBar .align-right{ 
    left: auto; 
    right: 0px; 
}

http://jsfiddle.net/isherwood/8TwbU/

的問題是，首先我需要開發菜單，以便懸停時打開的部分應打開並佔據菜單的整個寬度。因此，當我懸停在任何鏈接上時，應該在那裏打開一個公共區域來顯示菜單內容。

其次，lvl2類將鼠標懸停在已經打開的內容上。從而破壞了外觀。

也請建議，如果我需要使用jquery解決這個..目前我正在尋找一個解決方案沒有jQuery。

來源

2014-03-27 Vineet Verma

你想要lvl2類項目出現在哪裏？在lvl1盒子的右邊？ – nathangiesbrecht

其實我想把lvl2盒子顯示爲lvl1下面的一個簡單列表，因此不會被隱藏，所有... http：//www.myntra.com/菜單是我希望實現的... lvl0形式菜單名稱，lvl1成爲子類別的標題，lvl2成爲較窄的鏈接 –