Question

我一直试图制作像these guys这样的子菜单，但是使用Bootstrap 4.我似乎无法弄清楚如何做到这一点。

我的导航需要在.container中，然后我的子菜单需要全宽，链接位于中间。这意味着如果我想用CSS进行悬停动作，我必须将子菜单放在主导航中，对吧？然后将其位置设为绝对和宽度100％。那就是我怎么想我应该这样做的。但首先，它似乎根本不起作用（它不会伸展到全宽）。如果我添加宽度：100vw，那么我就无法使其响应并居中。

有人可以帮我这个吗？或者给我一个jQuery解决方案？因为我也一直在尝试，但当我的鼠标离开.solution-link并且我试图将鼠标悬停在子菜单项上时，我的子菜单会一直消失。

到目前为止，这是我的代码：

＆＃13;

.submenu {
    visibility: hidden;
    opacity: 0;
}
.submenu .nav {
    width: 100%;
    position: absolute;
}
.solutions-link:hover .submenu {
    opacity: 1;
    visibility: visible;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="menu-wrap">
  <nav class="navbar navbar-inverse bg-inverse navbar-toggleable">
    <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
      <a class="navbar-brand" href="#">Brand</a>

      <div class="collapse navbar-collapse" id="navbarsExampleContainer">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item solutions-link">
            <a class="nav-link" href="#">Solutions</a>

            <div class="submenu">
              <ul class="nav justify-content-center navbar-light" style="background-color: #e3f2fd;">
                <li class="nav-item">
                  <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
              <!-- /.nav -->
            </div>
            <!-- /.submenu -->
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<!-- /.menu-wrap -->

＆＃13;

编辑：忘记包含我的jQuery代码。为此，我将我的子菜单放在主导航器之外，但还没有设法修复一件事。当鼠标离开.solutions-link转到子菜单项时，它仍然消失。有没有办法解决这个问题，同时将子菜单保留在主导航之外？

var sub_menu_timer;
  $('.solutions-link').on({
    mouseenter: function () {
      $('.submenu').show();
                },
    mouseleave: function () {
      $('.submenu').hide();
                }
});

Answer 1

关于将submenu宽度设置为100%，您可能需要将其position设置为fixed并将left设置为{{1}如上所述：

这是一个jsfiddle，可以看到预期的结果： https://jsfiddle.net/99rzyt03/

希望这有助于您的情况。

Bootstrap .container菜单

1 个答案: