如何使用侧面下拉菜单将滚动添加到固定的左侧栏

Question

I'm looking to have a fixed left bar menu, but allow it to scroll if the screen height becomes short.

Here's the fiddle for what I have so far. I understand it is the overflow 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:)

Adding this allows the left menu to scroll, but then the drop down menu doesn't show:

overflow-y: auto;
overflow-x: hidden; 

With that commented out, the drop down menu displays as I'd like, but then the left menu doesn't scroll vertically.

My code for reference, but see above fiddle for working example.

Html:

<nav class="cd-side-nav js-cd-side-nav noPrint" style="">
        
  <ul class="cd-side__list js-cd-side__list" id="menu">
  
    <li class="cd-side__item cd-side__item--has-children">
        <a href="#">Menu 1</a>
          <ul class="cd-side__sub-list">
            <li class="cd-side__sub-item">Sub-Menu-1</li>
            <li class="cd-side__sub-item">Sub-Menu-2</li>
            <li class="cd-side__sub-item">Sub-Menu-3</li>
            <li class="cd-side__sub-item">Sub-Menu-4</li>
        </ul>
    </li>   
    <li class="cd-side__item cd-side__item--has-children">
        <a href="#">Menu 2</a>
        <ul class="cd-side__sub-list">
            <li class="cd-side__sub-item">Sub-Menu-1</li>
            <li class="cd-side__sub-item">Sub-Menu-2</li>
            <li class="cd-side__sub-item">Sub-Menu-3</li>
            <li class="cd-side__sub-item">Sub-Menu-4</li>
        </ul>
    </li>  
    <li class="cd-side__item cd-side__item--has-children">
        <a href="#">Menu etc...</a>
        <ul class="cd-side__sub-list">
            <li class="cd-side__sub-item">Sub-Menu-1</li>
            <li class="cd-side__sub-item">Sub-Menu-2</li>
            <li class="cd-side__sub-item">Sub-Menu-3</li>
            <li class="cd-side__sub-item">Sub-Menu-4</li>
        </ul>
    </li>   
    <li class="cd-side__item cd-side__item--has-children">
        <a href="#">Menu etc...</a>
        <ul class="cd-side__sub-list">
            <li class="cd-side__sub-item">Sub-Menu-1</li>
            <li class="cd-side__sub-item">Sub-Menu-2</li>
            <li class="cd-side__sub-item">Sub-Menu-3</li>
            <li class="cd-side__sub-item">Sub-Menu-4</li>
        </ul>
    </li>  
    <li class="cd-side__item cd-side__item--has-children">
        <a href="#">Menu etc...</a>
        <ul class="cd-side__sub-list">
            <li class="cd-side__sub-item">Sub-Menu-1</li>
            <li class="cd-side__sub-item">Sub-Menu-2</li>
            <li class="cd-side__sub-item">Sub-Menu-3</li>
            <li class="cd-side__sub-item">Sub-Menu-4</li>
        </ul>
    </li>  
    <li class="cd-side__item">
        <a href="#">Menu etc...</a>
    </li>  
    <li class="cd-side__item">
        <a href="#">Menu etc...</a>
    </li>  
    <li class="cd-side__item">
        <a href="#">Menu etc...</a>
    </li>  
    <li class="cd-side__item">
        <a href="#">Menu etc...</a>
    </li>  
    <li class="cd-side__item">
        <a href="#">Menu etc...</a>
    </li>  
</ul>

</nav>

CSS:

.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;
}

and JS to apply hover class to hovered over menu items:

$(document).ready(function() {

    $(".cd-side__item--has-children").on({
      mouseenter: function () {
    
          $(this).addClass("hover");
      },
      mouseleave: function () {
          $(this).removeClass("hover");
      }
    });
 
});

Answer 1

Here is the CSS code to allow the dropdown menu to scroll:

ul.dropdown-menu {
    overflow-y: scroll;
}

For the code you provide above, here is the solution:

ul#menu {
    overflow-y: scroll;
    height: inherit;
}