javascript - Bootstrap 子菜单在悬停之前出现?

标签 javascript css twitter-bootstrap drop-down-menu submenu

我有一个站点,我在其中稍微更改了 Bootstrap 导航栏,以便它可以悬停,直到在移动设备上查看它,然后它才可以单击。我刚刚在下拉菜单中添加了一个子菜单,出于某种原因,当我将鼠标悬停在父/主导航上时,下拉菜单会出现,并且在我将鼠标悬停在它的父元素上之前,子菜单也会出现。谁能弄清楚为什么会这样或提供另一种方法来做到这一点?下面是当我滚动主管理员链接并且没有悬停在第 1-1 页子菜单上时的样子。谢谢!

enter image description here

其中一个菜单项的示例

 <nav class="navbar navbar-inverse">
  <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Administor</a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1-1</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                </ul>               
            </li>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
          </ul>
        </li>
   </ul>
</div></nav>

最佳答案

请在 css 上添加此代码。希望对你有用

@media screen and (min-width: 768px){
    .dropdown:hover > .dropdown-menu{display: block !important;}
}

关于javascript - Bootstrap 子菜单在悬停之前出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28989887/

相关文章:

javascript - Ember 插件与普通包的对比

javascript - 将 $ajax 转换为 fetch() 以进行 PUT 请求

javascript - 从YouTube URL提取视频ID

html - flexbox:CSS 框显示不正确

javascript - CSS 变换 : rotate only works on image

javascript - 为数组中的数字创建直方图

css - Laravel 5 Elixir : How do I Compile and move . scss 文件?

javascript - 显示/隐藏不带动画的 Bootstrap Collapse 元素

twitter-bootstrap - Bootstrap 3输入附加问题

twitter-bootstrap - 带有右侧固定侧边栏的 Bootstrap 响应式网格