Question

我有一个navbar，左边有徽标，最右边是navbar-right（float: right），其中包含dropdown作为第一个元素和其他一些元素。下拉菜单较大且响应迅速。

我想做的就是防止当我将鼠标悬停在下拉菜单上并将光标移到导航栏中时，下拉菜单消失（朝向徽标）。只要光标仍在导航栏中，下拉列表应保持打开状态。所以这不应该发生-

JS小提琴-http://jsfiddle.net/gva90uks/10/embedded/result/

我曾尝试在菜单为left-padding时将dropdown-menu添加到open，但是填充必须根据窗口大小是动态的，否则会推动徽标。因此，我正在寻找更好的解决方案，而不是添加填充。

我对基于js和css的解决方案都没问题。

Answer 1

我将使用flexbox和flex-grow，如下所示。

这是因为flexbox允许元素在有空间的情况下变大（或缩小）。因此，下拉链接（父<li>元素）的样式默认为链接上文本的宽度。但是当我们将鼠标悬停在链接上时，<li>元素将增长尽可能，即一直到brand，导致将鼠标悬停在顶部栏（现在包含更大的<li>（下拉）元素）上时，下拉菜单不会隐藏。

.navbar .container-fluid {
  display: flex;
}

.navbar .container-fluid .navbar-collapse {
  flex-grow:2;
  
}

.mega-menu {
  position: absolute;
  right: 0;
  left: 0;
  /*padding: 27px 0;*/
}

.navbar-right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#menu-area {
  display: flex;
}

#menu-area .dropdown-toggle {
  margin-left: auto;
}

.dropdown-toggle:hover + .dropdown-menu, .dropdown-menu:hover {
    display: block;
    margin-top: 0;
}

.menu-large:hover {
  flex-grow: 2;
}
 
.dropdown-toggle:hover {
  flex-grow: 2;
}

.dropdown-toggle {
  text-align: right;
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="navbar-collapse" id="">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <div class="dropdown-menu mega-menu">
            <div class ="container">
              <ul class="list-unstyled">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li><a href="#">Another Link</a></li>
      </ul>
    </div>
  </div>
</nav>

引导程序可防止下拉列表在光标移动时消失

1 个答案: