css - 粘性菜单的下拉菜单（使用溢出-x）

Question

我创建了一个带有sticky属性的子菜单（以便它始终可见）和一个子菜单，overflow-x以便它可以在平板电脑或智能手机上使用。

问题是我添加的下拉菜单不是来自这个子菜单。

演示：https ://jsfiddle.net/qhmj4tpr/3/

HTML：

<div class="navbar navbar-expand-lg bg-white d-flex flex-nowrap justify-content-between align-items-center top-menu">
  LOGO
</div>
<div class="scroll-menu">
  <nav class="nav nav-menu">
    <div class="nav-menu-l">
      <a class="nav-link nav-title active" href="#"> Title</a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" data-boundary="scrollParent" aria-haspopup="true" aria-expanded="false">
          <span class="badge badge-secondary">10</span> Menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Menu 1</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 4</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 5</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 6</a>
        </div>
      </li>
      <a class="nav-link nav-title" href="#" style="width: 600px">
      </a>
    </div>
    <div class="nav-menu-r">
      <a class="btn btn-primary btn-sm" href="#>"> Print</a>
    </div>
  </nav>
</div>

<div class="main">
  Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus supervacua, quas subinde dimittebat ad principem.
</div>

CSS：

.top-menu {
  height: 50px;
  border-bottom: 1px solid #eff0f6;
  z-index: 10;
}

.scroll-menu {
  position: sticky;
  top: 0px;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
  height: 70px;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  background-color: #fff;
}

.scroll-menu .nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  padding-right: 1rem;
  padding-left: .5rem;
}

.nav-menu-l, .nav-menu-r {
  display: flex;
  flex-wrap: nowrap;
}

.main {
  padding: 20px;
  height: 900px;
}

我真的需要能够水平滚动菜单，我使用 BootStrap 但如果你有自定义 CSS 的解决方案，我会接受

标签： csstwitter-bootstrapbootstrap-4