locked
Adding scroll bar to sub menu on Masterpage RRS feed

  • Question

  • User534484856 posted

    I created my first masterpage and one of my dropdown menu list has a sub menu list.  The sub menu list is longer than the webpage so it gets cut off at the bottom of the page.  I would like to add a scroll bar to the sub menu list so I can scroll thru the entire list.  its where the tripple ul is located at the bottom of the code.  How can I make that have a scroll bar.

    nav {
        top: 0;
        left: 0;
        
        ;
        width: 100%;
        background-color: rgba(0,0,0,0.6);
    }
    
        nav ul {
            float: left;
            padding: 0;
            margin: 0;
            ;
            list-style: none;
            
        }
    
            nav ul li {
                display: inline-block;
                float: left;
                ;
            }
    
        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;
            ;
            width: 300px;
            top: 26px;
        }
    
        nav ul li:hover > ul {
            display: inherit;
        }
    
        nav ul ul li {
            float: none;
            display: list-item;
            ;
            background-color: rgba(0,0,0,0.6);
        }
    
    
        nav ul ul ul li {
            ;
            left:300px;
            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;
            ;
        }
    
            nav ul ul ul {
                float: none;
                ;
            }
    Monday, October 5, 2020 7:32 PM

All replies

  • User-939850651 posted

    Hi Walleroo01,

    I created my first masterpage and one of my dropdown menu list has a sub menu list.  The sub menu list is longer than the webpage so it gets cut off at the bottom of the page.  I would like to add a scroll bar to the sub menu list so I can scroll thru the entire list.  its where the tripple ul is located at the bottom of the code.  How can I make that have a scroll bar.

    According to your description, if you want to add a scroll bar to ul, have you tried setting the max-height attribute and overflow attribute to ul, this will meet your requirements.

    Please refer to Adding scroll bar to dynamic ul li  for more details.

    Hope this can help you.

    Best regards,

    Xudong Peng

    Tuesday, October 6, 2020 2:19 AM