3 replies [Last post]
nesnejnhoj
nesnejnhoj's picture
Offline
newbie
Last seen: 7 years 7 weeks ago
Timezone: GMT-5
Joined: 2014-04-23
Posts: 2
Points: 3

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;
}

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

Nested Drop Down Menus

Nested Drop Down Menus

  • About Us

  • Products

  • Locations

  • Contacts
  • helldog2004
    helldog2004's picture
    Offline
    Enthusiast
    Netherlands
    Last seen: 4 years 45 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2014-03-02
    Posts: 205
    Points: 239

    I have played with your code

    I have played with your code in JSfiddle.

    Please take a look here and see what I have changed.
    Also note that you never filled in some text in the first submenu. The thing you are seeing here is the alt text or rather the title of the button, not the text itself. Therefore you never saw the button.

    This is what the code of the first submenu button looked like:

    <ul class="subMenu1">
                <li> <a rel="nofollow" title="Our History" href="#"></a>
                </li>

    This is what it looks like now:

    <ul class="subMenu1">
                <li> <a rel="nofollow" title="Our History" href="#">
                   Our history
                    </a>
                </li>

    Hope this solved your problem.
    Cheers, Henk

    Check Maximum Webdesign for your online solutions

    nesnejnhoj
    nesnejnhoj's picture
    Offline
    newbie
    Last seen: 7 years 7 weeks ago
    Timezone: GMT-5
    Joined: 2014-04-23
    Posts: 2
    Points: 3

    The text is in the html. Here

    helldog2004
    helldog2004's picture
    Offline
    Enthusiast
    Netherlands
    Last seen: 4 years 45 weeks ago
    Netherlands
    Timezone: GMT+2
    Joined: 2014-03-02
    Posts: 205
    Points: 239

    Okay, I recreated your

    Okay, I recreated your complete menu and made it work as I suspect you want it to work.
    You can check your menu here: JSfiddle

    You can copy the HTML and CSS source from there and paste it inside your own website.
    Let me know if this solved your problem.

    Also, you have to ofcourse change the URL's yourself again.
    Cheers, Henk

    Check Maximum Webdesign for your online solutions