locked
Add scroll bar to masterpage menu lists RRS feed

  • Question

  • I have created a masterpage with dropdown menu lists.  Each list have sub menu lists to open to the right of the main menu list.  Some of these list are longer then the webpage so they get cutoff on the bottom of the page.  I am trying to add scroll bars to each menu list (see below codes).  When I add the overflow-y to each ul on the css page it prevents the sub menus from appearing to the right.  How can I have both the main menu dropdown list and sub menu list both be seen and have the ability to scroll thru them both.

    css code:

    av {
        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;
            max-height: 2000%; overflow-y: auto;
        }
    
        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;
            max-height:100%; overflow: auto;
        }
    
    .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;
                ;
            }
    }

    when NOT using the overflow code I see the sub menu (see pic 1)

    when using the overflow code I am unable to see the sub menu (see pic 2)pic 2

    • Moved by CoolDadTx Thursday, October 8, 2020 5:27 PM ASP.NET related
    Thursday, October 8, 2020 3:22 PM

Answers

  • I figured it out.  I was missing nav ul ul ul{}  and I needed to alter the nav ul ul ul li{} see below changes.

    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 {
            display: none;
            ;
            left: 300px;
            top: 0px;
            max-height: 1000%;
            overflow-y: auto;
        }
    
        nav ul ul ul li {
            float: none;
            display: list-item;
            ;
    
        }
    
    
    .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;
                ;
            }
    }

    • Marked as answer by wgraulich Thursday, October 8, 2020 6:20 PM
    Thursday, October 8, 2020 6:20 PM

All replies

  • Hello,

    This forum is for C#, not CSS, HTML or JavaScript.

    Options are the following forums and make sure to tag them properly.

    https://docs.microsoft.com/en-us/answers/index.html

    https://stackoverflow.com/


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Thursday, October 8, 2020 4:41 PM
  • I figured it out.  I was missing nav ul ul ul{}  and I needed to alter the nav ul ul ul li{} see below changes.

    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 {
            display: none;
            ;
            left: 300px;
            top: 0px;
            max-height: 1000%;
            overflow-y: auto;
        }
    
        nav ul ul ul li {
            float: none;
            display: list-item;
            ;
    
        }
    
    
    .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;
                ;
            }
    }

    • Marked as answer by wgraulich Thursday, October 8, 2020 6:20 PM
    Thursday, October 8, 2020 6:20 PM