Question

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

问题在于，我添加的下拉菜单不是该子菜单中的。

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的解决方案，那么我就可以接受

从粘滞菜单中下拉菜单（带有溢出-x）

0 个答案: