Bootstrap .container 菜单内的全宽居中子菜单

Question

我一直在尝试制作像 these guys 这样的子菜单，但使用的是 Bootstrap 4。我似乎不知道该怎么做。

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

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

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

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

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

编辑：忘记包含我的 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 设置为0，如上所述：

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

这是一个查看预期结果的 jsfiddle： https://jsfiddle.net/99rzyt03/

希望这对您的情况有所帮助。