title: How to add scrolling to fixed left bar with side drop down menu
body: <p>I'm looking to have a fixed left bar menu, but allow it to scroll if the screen height becomes short.</p>
  <p>Here's <a href="https://jsfiddle.net/xhoanyzL/" rel="nofollow noreferrer">the fiddle</a> for what I have so far. I understand it is the <code>overflow</code> css that is causing the dropdown menu to not show, but not sure how to fix. I'm a backend dev, not a front end :)</p>
  <p>Adding this allows the left menu to scroll, but then the drop down menu doesn't show:</p>
  <pre><code>overflow-y: auto;
  overflow-x: hidden; 
  </code></pre>
  <p>With that commented out, the drop down menu displays as I'd like, but then the left menu doesn't scroll vertically.</p>
  <p>My code for reference, but see above fiddle for working example.</p>
  <p>Html:</p>
  <pre><code>&lt;nav class=&quot;cd-side-nav js-cd-side-nav noPrint&quot; style=&quot;&quot;&gt;
          
    &lt;ul class=&quot;cd-side__list js-cd-side__list&quot; id=&quot;menu&quot;&gt;
    
      &lt;li class=&quot;cd-side__item cd-side__item--has-children&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu 1&lt;/a&gt;
            &lt;ul class=&quot;cd-side__sub-list&quot;&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-1&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-2&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-3&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;   
      &lt;li class=&quot;cd-side__item cd-side__item--has-children&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu 2&lt;/a&gt;
          &lt;ul class=&quot;cd-side__sub-list&quot;&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-1&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-2&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-3&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;  
      &lt;li class=&quot;cd-side__item cd-side__item--has-children&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
          &lt;ul class=&quot;cd-side__sub-list&quot;&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-1&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-2&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-3&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;   
      &lt;li class=&quot;cd-side__item cd-side__item--has-children&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
          &lt;ul class=&quot;cd-side__sub-list&quot;&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-1&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-2&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-3&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;  
      &lt;li class=&quot;cd-side__item cd-side__item--has-children&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
          &lt;ul class=&quot;cd-side__sub-list&quot;&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-1&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-2&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-3&lt;/li&gt;
              &lt;li class=&quot;cd-side__sub-item&quot;&gt;Sub-Menu-4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;  
      &lt;li class=&quot;cd-side__item&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
      &lt;/li&gt;  
      &lt;li class=&quot;cd-side__item&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
      &lt;/li&gt;  
      &lt;li class=&quot;cd-side__item&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
      &lt;/li&gt;  
      &lt;li class=&quot;cd-side__item&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
      &lt;/li&gt;  
      &lt;li class=&quot;cd-side__item&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Menu etc...&lt;/a&gt;
      &lt;/li&gt;  
  &lt;/ul&gt;
  
  &lt;/nav&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.cd-side-nav {
      top: 0;
      left: 0;
      height: 100vh;
      position: fixed;
      width: 200px;
   /* with this commented out - drop down menu displays ok - but left menu doesn't scroll*/  
      /*
      overflow-y: auto;
      overflow-x: hidden; 
      */
   
  }
  
  .cd-side__item {
    height:75px;
    border: 1px solid grey;
  }
  
  .cd-side__sub-list, .cd-nav__sub-list {
      background-color: grey;
      display: none;
  }
  
  .cd-side__item--has-children:not(.cd-side__item--selected).hover .cd-side__sub-list {
      display: block;
      position: relative;
      z-index: 1;
      left: 200px;
      top: -20px;
      width: 200px;
  }
  </code></pre>
  <p>and JS to apply <code>hover</code> class to hovered over menu items:</p>
  <pre><code>$(document).ready(function() {
  
      $(&quot;.cd-side__item--has-children&quot;).on({
        mouseenter: function () {
      
            $(this).addClass(&quot;hover&quot;);
        },
        mouseleave: function () {
            $(this).removeClass(&quot;hover&quot;);
        }
      });
   
  });
  </code></pre>