title: css horizontal scrolling menu with dropdowns
body: <p>I am having dropdowns in a menu that has horizontal scrolling on mobile resolution.</p>
  
  <p>As you can see in the example the desktop version is able to display the dropdowns when the menu is hovered, however, when using the mobile version that uses <code>overflow-y: hidden</code> the dropdown is obscured.</p>
  
  <p>I have attempted to change the <code>overflow-y</code> to all available options, I would have thought setting it to <code>visible</code> would allow the dropdown to be seen however, this is not the case.</p>
  
  <p>I'm open to anything at this point, I'm about to use position fixed and set it with javascript but I would prefer not to if there is a better solution in css. </p>
  
  <p>I need to leave the horizontal scrolling of the top level menu items.</p>
  
  <p>Thanks for any help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="main mobile"&gt;
    &lt;header class="header"&gt;
      &lt;nav class="nav"&gt;
        &lt;ul class="list"&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;item 1&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;longer item 2&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;item 3&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;item 4&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  &lt;/main&gt;
  
  &lt;main class="main"&gt;
    &lt;header class="header"&gt;
      &lt;nav class="nav"&gt;
        &lt;ul class="list"&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;item 1&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;longer item 2&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;item 3&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="list__item"&gt;
            &lt;span&gt;item 4&lt;/span&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li class="dropdown__item"&gt;item 1&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 2&lt;/li&gt;
              &lt;li class="dropdown__item"&gt;item 3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>