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

Question

我希望有一个固定的左侧栏菜单，但如果屏幕高度变短，请允许它滚动。

这里是the fiddle，这是我目前所拥有的。我知道是 overflow css 导致下拉菜单不显示，但不知道如何修复。我是后端开发人员，不是前端 :)

添加此项允许左侧菜单滚动，但下拉菜单不显示：

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

注释掉后，下拉菜单会按我的意愿显示，但左侧菜单不会垂直滚动。

我的代码供参考，但请参阅上面的小提琴以获取工作示例。

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

和 JS 将 hover 类应用于悬停在菜单项上：

$(document).ready(function() {

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

Answer 1

这是允许下拉菜单滚动的 CSS 代码：

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

对于您上面提供的代码，解决方案如下：

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