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
  • April 24, 2014 at 4:43 am #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>

    April 24, 2014 at 4:46 am #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.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.