html - 带有下拉菜单的 CSS 水平滚动菜单

Question

我在移动分辨率上具有水平滚动的菜单中有下拉菜单。

正如您在示例中看到的那样，桌面版本能够在菜单悬停时显示下拉菜单，但是，当使用使用overflow-y: hidden下拉菜单的移动版本时会被遮挡。

我试图将其更改overflow-y为所有可用选项，我原以为将其设置visible为可以看到下拉列表，但事实并非如此。

在这一点上，我对任何事情都持开放态度，我将使用固定位置并使用 javascript 设置它，但如果 css 中有更好的解决方案，我不希望这样做。

我需要离开顶级菜单项的水平滚动。

谢谢你的帮助。

body {
  background: #eee;
  font-family: sans-serif;
}

.main.mobile {
  max-width: 250px;
}

.main {
  max-width: 700px;
  margin: 0 auto;
  background: white;
}

.mobile .nav {
  overflow-x: scroll;
  overflow-y: hidden;
}

.list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list__item {
  padding: 1em;
  white-space: nowrap; 
  position: relative;
  transition: .2s all;
}

.list__item:hover {
  background: #dc205c; 
}

.list__item:hover .dropdown {
  visibility: visible;
  opacity: 1;
}

.dropdown {
  visibility: hidden;
  opacity: 0;
  transition: .4s all;
  position: absolute;
  list-style-type: none;
  top: 100%;
  padding: 0;
  left: 0;
  background: white;
}

.dropdown__item {
  padding: 1em;
  transition: .2s all;
}

.dropdown__item:hover {
  background: #dc205c;
}

<main class="main mobile">
  <header class="header">
    <nav class="nav">
      <ul class="list">
        <li class="list__item">
          <span>item 1</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>longer item 2</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 3</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 4</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
</main>

<main class="main">
  <header class="header">
    <nav class="nav">
      <ul class="list">
        <li class="list__item">
          <span>item 1</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>longer item 2</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 3</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
        <li class="list__item">
          <span>item 4</span>
          <ul class="dropdown">
            <li class="dropdown__item">item 1</li>
            <li class="dropdown__item">item 2</li>
            <li class="dropdown__item">item 3</li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>
</main>

标签： htmlcssflexboxoverflow