Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 3rd level menu doesn’t show when 2nd level has overflow:hidden applied

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #168446
    nesnejnhoj
    Participant

    I am animating the drop down menu using max-height and the 2nd level works fine but the 3rd level doesn’t appear. If I have the 2nd level overflow set to visible then it appears but not animated and the 3rd level appears and is animated.
    Any suggestions?

    Pasted below is the CSS and the HTML.

    @charset “utf-8”;

    /* limited resets /
    body,nav,h1,h2,ul,li,a {
    margin:0;
    padding:0;
    }
    body{
    width:80%;
    margin: 1em auto;
    font-family:”Lucida Sans”, Verdana, sans-serif;
    }
    a{
    display:block;
    text-decoration:none;
    font-size:.9em;
    }
    header{
    line-height:1em;
    margin-bottom:1em;
    background: #ccc;
    border:1px solid #333;
    color: black;
    padding:1em;
    font-size:.9em;
    text-transform:uppercase;
    }
    ul{
    list-style:none;
    }
    /
    Drop down styles ===================/
    /
    Top Menu ===================/
    .topMenu{
    width:100%;
    line-height:2em;
    }
    .topMenu li{
    float:left;
    position:relative;
    }
    .topMenu li a{
    padding: 0 3em 0 1em;
    background:#444;
    border:1px solid #777;
    color:white;
    white-space: nowrap;
    }
    .topMenu li:hover > a{
    background:#282828;
    }
    .topMenu li:hover .subMenu1 {
    left:0;
    max-height:100em;
    }
    /
    Sub Menu 1 ===================/
    .subMenu1{
    float:none;
    position:absolute;
    top:100%;
    left:-9999em;
    max-height:0;
    transition:max-height .4s ease-in-out;
    overflow:hidden;
    }
    .subMenu1 li{
    width:100%;
    }
    .subMenu1 li a{
    background:#ccc;
    color:black;
    border:1px solid #777;
    }
    .subMenu1 li:hover > a{
    background:#777;
    }
    .subMenu1 li:hover .subMenu2{
    left:100%;
    max-height:100em;
    }
    /
    Sub Menu 2 ===================*/
    .subMenu2{
    position:absolute;
    top:0;
    left:-9999em;
    max-height:0;
    transition:max-height .4s ease-in-out;
    overflow:hidden;
    }

    ==========================================================

    <!doctype html>
    <html>
    <head>
    <meta charset=”utf-8″>
    <title>Nested Drop Down Menus</title>
    <link href=”_css/main.css” rel=”stylesheet”>
    </head>
    <body>
    <header>
    <h2>Nested Drop Down Menus</h2>
    </header>
    <nav>
    <ul class=”topMenu”>

    </nav>
    </body>
    </html>

    #168583
    Paulie_D
    Member

    Please make a Codepen.io example but using overflow:hidden will always cause these type of problems.

    I haven’t looked through the codedump but using some JS would probably be a better option especially as your positioning is likely to have performance issues.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.