使用引导程序悬停在菜单上时，子菜单下显示子菜单

Question

我正在尝试在子菜单下创建一个子菜单。我正在使用bootstrap 3.1。我的问题是当鼠标悬停在菜单上时（参见图像：悬停在＆＃34;我们提供什么＆＃34;）子菜单下的子菜单（来自图像链接4.1）也会显示。它应该只在我悬停在Link4上时显示。我怎么能阻止这个。任何人都有任何想法？请与我分享。

我的代码如下：

<li class="dropdown">
    <a href="/">WHAT WE OFFER<span class="caret"></span></a>
    <ul class="dropdown-menu dropdown-menu-left">
        <li>
            <a href="/static_pages/index">Link1</a>
         </li>
         <li>
             <a href="/static_pages/index">Link2</a>
          </li>
          <li>
               <a href="/static_pages/index">Link3</a>
          </li>                                               
          <li class="dropdown">
               <a href="/static_pages/index">Link4<i class="right-caret"></i></a>
               <ul class="dropdown-menu sub-menu">                            
                   <li>
                       <a href="/static_pages/index">link 4.1</a>
                   </li>
                   <li>
                       <a href="/static_pages/index">link 4.2</a>
                   </li>
               </ul>
           </li>                           
       </ul>
   </li>

的CSS：

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}

.right-caret:after,.left-caret:after
 { 
    content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}

.right-caret:after
{
    border-left: 5px solid #000; 
}

.left-caret:after
{  
    border-right: 5px solid #ffaf46;
}

Answer 1

以下是可收起菜单的示例。

<强> HTML

<ul class="nav nav-pills">
<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>
            <li><a href="#">Another action</a></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

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}
.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;
}

这是JSFiddle http://jsfiddle.net/zaheerbaloch/54r1g29s/