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

这是工作解决方案：

>>> import pendulum, maya # you need to pip install them
>>> pendulum.parse('2017-04-26T13:00:00+02:00')
<Pendulum [2017-04-26T13:00:00+02:00]>
>>> maya.parse('2017-04-26T13:00:00+02:00')
<MayaDT epoch=1493204400.0>

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

对于响应，您可以从here

找到演示

只需悬停的Bootstrap子菜单

2 个答案: