能够在 ASPX 母版页中滚动菜单下拉列表

Question

我已经创建了我的第一个母版页，如果这是一个愚蠢的问题，请多多包涵。母版页中的一个菜单下拉列表比可视页面长，因此下拉列表中的某些项目在页面底部被截断。我怎样才能使下拉列表能够滚动，以便我可以看到整个列表。

nav{
    top:0;
    left:0;
    position:fixed;
    width:100%;
    background-color:rgba(0,0,0,0.6);
}
nav ul{
    float:left;
    padding:0;
    margin:0;
    position:relative;
    list-style:none;
}
nav ul li{
    display:inline-block;
    float:left;
    position:relative;
 }
nav a{
    display:block;
    padding:3px 10px;
    color:white;
    font-size:17px;
    font-weight:bold;
    text-decoration:none;
    font-family:Arial;

}
nav a:hover{
    background-color:white;
    color:gray;
}nav ul ul{
     display:none;
     position:absolute;
     width:450px;
     top:26px;
 }
 nav ul li:hover>ul{
     display:inherit;
 }
 nav ul ul li{
     float:none;
     display:list-item;
     position:relative;
     background-color:rgba(0,0,0,0.6);     
 }
 nav ul ul ul li{
     position:relative;
     left:450px;
     top:-26px;
 }
 .toggle, [id^=drop]{
     display:none;
 }
 @media all and (max-width:600px){
     .menu{
         display:none;
     }
     .toggle{
         display:block;
         color:white;
         background-color:rgba(0,0,0,0.6);
         text-decoration:none;
         padding:20px;
     }
     .toggle:hover{
         background-color:white;
         color:dimgray;
     }
     #logo{
         display:block;
         float:none;
     }
     [id^=drop]:checked+ul{
         display:block;
 }
     nav ul li{
         display:block;
         width:100%
     }
     nav ul ul{
         float:none;
         position:static;
     }
     nav ul ul ul{
         float:none;
         position:absolute;
     }

 }

Answer 1

一个选项是通过 CSS 设置下拉列表容器的最大高度（max-height : number [%, PX, VH] ）并指定溢出/滚动（overflow-y : [ scroll|auto ] ) 到达项目的底部。例如：

.nav ul { max-height:100%; overflow-y：自动； }

您可以使用 %、PX、VH .. 或任何适合您的特定项目用例的套件来调整 Max-Height。

另一种选择是在下拉列表中引入列，如下所述：

How to fix a dropdown menu that extends past bottom of page

Answer 2

我明白了。要在子菜单下拉列表中有一个滚动条，我需要添加 nav ul ul ul 并更改 nav ul ul ul li 见下文；

    top: 0;
    left: 0;
    
    position: fixed;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
}

    nav ul {
        float: left;
        padding: 0;
        margin: 0;
        position: relative;
        list-style: none;

    }

        nav ul li {
            display: inline-block;
            float: left;
            position: relative;
        }

    nav a {
        display: block;
        padding: 3px 15px;
        color: white;
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;
        font-family: Arial;
    }

        nav a:hover {
            background-color: white;
            color: gray;
        }

    nav ul ul {
        display: none;
        position: absolute;
        width: 300px;
        top: 26px;

    }

    nav ul li:hover > ul {
        display: inherit;
    }

    nav ul ul li {
        float: none;
        display: list-item;
        position: relative;
        background-color: rgba(0,0,0,0.6);
    }


    nav ul ul ul {
        display: none;
        position: absolute;
        left: 300px;
        top: 0px;
        max-height: 1000%;
        overflow-y: auto;
    }

    nav ul ul ul li {
        float: none;
        display: list-item;
        position: relative;

    }


.toggle, [id^=drop] {
    display: none;
}

@media all and (max-width:600px) {
    .menu {
        display: none;
    }

    .toggle {
        display: block;
        color: white;
        background-color: rgba(0,0,0,0.6);
        text-decoration: none;
        padding: 20px;
    }

        .toggle:hover {
            background-color: white;
            color: dimgray;
        }

    #logo {
        display: block;
        float: none;
    }

    [id^=drop]:checked + ul {
        display: block;
    }

    nav ul li {
        display: block;
        width: 100%
    }

    nav ul ul {
        float: none;
        position: static;
    }

        nav ul ul ul {
            float: none;
            position: absolute;
        }
}```

能够在 ASPX 母版页中滚动菜单下拉列表

Ability to scrolling thru menu dropdown list in ASPX masterpage

asp.net

master-pages

drop-down-menu