如何为下拉菜单添加滚动效果？解决菜单溢出不可见问题

当前菜单处于下拉模式时会发生溢出，部分菜单项无法被查看。预期效果是当菜单高度超出屏幕时可滚动，以显示全部菜单项。曾为li元素设置overflow:scroll属性，但未达到预期效果，求实现菜单滚动的最优方案。

相关代码 #

HTML代码 #

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

    <header class="site-header menu-text">
        <a href="#" id='drop'><i class="fa fa-bars"></i></a>
        <nav>
            <ul>
                <li>Menu 1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
                <li>Menu 5</li>
                <li>Menu 6</li>
                <li>Menu 7</li>
                <li>Menu 8</li>
                <li>Menu 9</li>
                <li>Menu 10</li>
            </ul>
        </nav>
    </header>

    <div class="container"></div>
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    <script src="script.js"></script>
</body>
</html>

script.js代码 #

(function($){
    var dropper = $("a#drop"),
        menu = $("nav>ul"),
        subMenu = $("nav>ul>li.submenu"),
        link = menu.find("li");

        dropper.on("click" , function(e){
            $( this ).toggleClass( 'active' );
            menu.slideToggle();
            e.preventDefault();
        });

        $(window).resize(function(){
            var winWidth = $(this).width();
            if(winWidth > 920 && menu.is(":hidden")){
                menu.removeAttr("style");
            }
        });

        link.on("click" , function(){
            var winWidth = $(window).width();
            if(winWidth < 920 && !$(this).hasClass("submenu")){
                menu.slideToggle(); 
            }
        });
        subMenu.hover(function(){
            $(this).children("ul").stop().slideDown();
        },function(){
            $(this).children("ul").stop().slideUp();
        });
})(jQuery);

style.css代码 #

.site-header {
    width: 100%;
    height: 75px;
    position: fixed;
    top: 0;
    z-index: 12;
    overflow: visible;
    background-color: purple;
}

.site-header a#drop {
    background-color: white;
    padding: 20px 15px;
    margin: 10px 15px;
    float: right;
    display: block;
}

@media screen and (min-width: 920px) {
    .site-header a#drop {
        display: none;
    }
}

.site-header nav {
    float: right;
    margin-bottom: 100px;
    width: 100%;
    margin-top: 5px;
    background-color: green;
    opacity:0.7;
}

@media screen and (min-width: 920px) {
    .site-header nav {
        float: none;
        margin-top: 0px;
    }
}

.site-header nav ul {
    display: none;
    padding: 0;
    margin-top: 20px;
    overflow: scroll;
}

@media screen and (min-width: 920px) {
    .site-header nav ul {
        float: right;
        display: block;
        margin-top: 0px;
        overflow: hidden;
    }
}

.site-header nav ul li {
    position: relative;
    z-index: 2;
    float: left;
    display: block;
    text-align: left;
    text-indent: 10px;
    width: 100%;
    margin-left: 0;
    height: auto;
    padding: 12px 0 12px;
    color:white;
    font-weight:bold;
}

@media screen and (min-width: 920px) {
    .site-header nav ul li {
        display: inline-block;
        margin: 0;
        text-align: center;
        padding: 0 8px;
        height: 76px;
        width: auto;
        text-indent: 0;
    }
}

.container{
    background-image:repeating-linear-gradient(#f8ea00, #f8ea00 30px, #005bf7 10px, #005bf7 70px);
    height:600px;
    } 

最优实现方案 #

核心是给下拉状态的菜单容器（nav>ul）设置最大高度和垂直滚动，而非单个li元素。具体修改如下：

修改style.css中的菜单样式 #

找到.site-header nav ul的基础样式，替换原有overflow属性并添加max-height：

.site-header nav ul {
    display: none;
    padding: 0;
    margin-top: 20px;
    /* 仅垂直方向滚动，内容未超出时不显示滚动条 */
    overflow-y: auto;
    /* 计算可用高度：视口高度减去header高度+边距，避免菜单超出屏幕 */
    max-height: calc(100vh - 90px);
}

关键说明 #

1. 为什么给li设置无效？：overflow需要作用在包含所有菜单项的容器（ul）上，单个li本身没有溢出内容，所以设置在ul才会生效。
2. max-height的计算逻辑：100vh是当前屏幕视口高度，减去header的75px再留15px边距，确保菜单不会覆盖header或超出屏幕底部。
3. overflow-y:auto的优势：只有当菜单项总高度超过max-height时，才会显示垂直滚动条，比overflow:scroll更简洁，避免出现空滚动条。

可选优化（隐藏滚动条） #

如果需要保留滚动功能但隐藏滚动条，可添加以下浏览器兼容样式：

/* 隐藏Chrome、Safari的滚动条 */
.site-header nav ul::-webkit-scrollbar {
    width: 0;
}
/* 隐藏Firefox的滚动条 */
.site-header nav ul {
    scrollbar-width: none;
}

内容的提问来源于stack exchange，提问作者Langcode