嵌套子菜單重疊如何修復？

Question

http://bootply.com/68820嵌套子菜單重疊如何修復？謝謝。

HTML

<ul class="nav nav-pills"> 
    <li class="active"><a href="#">Regular link</a></li> 
    <li class="dropdown"> 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu" id="menu1"> 
      <li> 
       <a href="#">2-level Menu <i class="icon-arrow-right"></i></a> 
       <ul class="dropdown-menu sub-menu"> 
        <li><a href="#">Action</a></li> 
        <ul class="dropdown-menu sub-menu"> 
         <li><a href="#">a</a></li> 
         <li><a href="#">b</a></li> 

         </ul> 
        <li><a href="#">Another action</a></li> 
        <ul class="dropdown-menu sub-menu"> 
         <li><a href="#">t</a></li> 
         <li><a href="#">t</a></li> 

        </ul> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 

</ul> 

CSS

.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    visibility: hidden; 
    margin-top: -1px; 
} 

.dropdown-menu li:hover .sub-menu { 
    visibility: visible; 
    display: block; 
} 



.navbar .sub-menu:before { 
    border-bottom: 7px solid transparent; 
    border-left: none; 
    border-right: 7px solid rgba(0, 0, 0, 0.2); 
    border-top: 7px solid transparent; 
    left: -7px; 
    top: 10px; 
} 
.navbar .sub-menu:after { 
    border-top: 6px solid transparent; 
    border-left: none; 
    border-right: 6px solid #fff; 
    border-bottom: 6px solid transparent; 
    left: 10px; 
    top: 11px; 
    left: -6px; 
} 

.dropdown-menu li:hover > .dropdown-menu { 
    visibility: visible; 
    display: block; 
} 

例如：行動應該有 '一' 和 'b'，但他們表現出下一個菜單的子菜單。它只是讓我困惑。誰來幫幫我 。謝謝。

Answer 1

使用這個網站的鏈接是http://bootply.com/68830

<ul class="nav nav-pills"> 
    <li class="active"><a href="#">Regular link</a></li> 
    <li class="dropdown"> 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu" id="menu1"> 
      <li> 
       <a href="#">2-level Menu <i class="icon-arrow-right"></i></a> 
       <ul class="dropdown-menu sub-menu"> 
        <li><a href="#">Action</a> 
        <ul class="dropdown-menu sub-menu"> 
         <li><a href="#">a</a></li> 
         <li><a href="#">b</a></li> 

         </ul> 
        </li><li><a href="#">Another action</a> 
        <ul class="dropdown-menu sub-menu"> 
         <li><a href="#">t</a></li> 
         <li><a href="#">t</a></li> 

        </ul> 
        </li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 

</ul> 

和這個CSS

.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    visibility: hidden; 
    margin-top: -1px; 
} 

.dropdown-menu > li:hover > .sub-menu { 
    visibility: visible; 
    display: block; 
} 




.navbar .sub-menu:before { 
    border-bottom: 7px solid transparent; 
    border-left: none; 
    border-right: 7px solid rgba(0, 0, 0, 0.2); 
    border-top: 7px solid transparent; 
    left: -7px; 
    top: 10px; 
} 
.navbar .sub-menu:after { 
    border-top: 6px solid transparent; 
    border-left: none; 
    border-right: 6px solid #fff; 
    border-bottom: 6px solid transparent; 
    left: 10px; 
    top: 11px; 
    left: -6px; 
}