如何使用側面下拉菜單將滾動添加到固定的左側欄

Question

我希望有一個固定的左欄菜單，但如果屏幕高度變短，則允許它滾動。

這是我到目前為止所擁有的小提琴。 我知道這是導致下拉菜單不顯示的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 class 懸停在菜單項上：

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