带悬停的Bootstrap子菜单

Question

我有子菜单菜单。当我徘徊李它工作正常，并显示我的子菜单和隐藏。但是，如果我点击菜单，它会显示子菜单，但不会隐藏。我不希望允许点击菜单。只需显示悬停子菜单。

<li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
    aria-haspopup="true" aria-expanded="false">menu</a> 
    <ul class="dropdown-menu"> 
    <li><a href="/<?php echo App::getLocale()?>/profile">submenu 1</a></li> 
    <li><a href="/<?php echo App::getLocale()?>/history">submenu 2</a></li> 
    <li><a href="/<?php echo App::getLocale()?>/brands">submenu 3</a></li> 
    <li><a href="/<?php echo App::getLocale()?>/manufacturing">submenu 4</a></li> 
    </ul> 
</li> 

我该如何解决这个问题？

谢谢

Answer 1

请在下面添加CSS在你的CSS文件

.open > .dropdown-menu{display:none;} 

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

Answer 2

这里是工作的解决方案：

body { 
 
    padding-top: 60px; 
 
    padding-bottom: 40px; 
 
} 
 

 

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<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> 
 
      <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> 
 
<li class="dropdown"> 
 
    <a href="#">Menu</a> 
 
</li> 
 
<li class="dropdown"> 
 
    <a href="#">Menu</a> 
 
</li> 
 
</ul>

为了响应你可以从 here