带有下拉菜单的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>