可以通过ASPX主页中的菜单下拉列表滚动

问题描述

我已经创建了我的第一个母版页，所以如果这是一个愚蠢的问题，请多多包涵。我的主页中的菜单下拉列表之一比可见页面长，因此下拉列表中的某些项在页面底部被切除。如何使下拉列表具有滚动功能，以便可以看到整个列表。

nav{
    top:0;
    left:0;
    position:fixed;
    width:100%;
    background-color:rgba(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.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.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;
     }

 }

解决方法

一个选项是通过CSS设置下拉菜单的容器的最大高度（max-height：数字[％，PX，VH]），并指定一个上溢/滚动（overflow-y：[scroll | auto]）到达项目的底部。例如：

.nav ul {max-height：100％;溢出-y：自动; }

您可以使用％，PX，VH ..或任何适合您特定项目用例的套件来调整最大高度。

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

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

,

我知道了。要在子菜单下拉列表中具有滚动条，我需要添加nav ul ul ul并更改nav ul ul ul li，请参见下文；

    top: 0;
    left: 0;
    
    position: fixed;
    width: 100%;
    background-color: rgba(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.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.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;
        }
}```