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>