Third level of CSS dropdown menu does not work

Question

I have a 2-level CSS dropmenu menu working nicely - taken from the web.

I'm pretty new to CSS and tried to mod it to work with 3-levels but unfortunately I failed...

Screen shot of my 3rd level menu fail:

http://i1280.photobucket.com/albums/a498/paul1234562/menu-screen_zpsb180cdfa.jpg

Update: note the third-level menu is supposed to display to the right of its parent menu, not over it and the other sub-menus.

You can see the menu here:

http://etfsage.ca/test/

Under 'Canada Equity', I wanted the 'Broad Market' submenu to display the third level menu options when the mouse hovers over 'Broad Market'.

If some CSS Guru could help me get this working I would hugely appreciate it.

The HTML code is:

<!DOCTYPE HTML>
<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">

<meta name="robots" content="noindex, follow">
<meta name="description" content="">

<meta charset="UTF-8">
<title>Test Menu</title>


</head>
<body>


<!-- Display Main Menu !-->
<nav class="cf">
  <nav class="cf">

    <!-- menu nav -->
    <ul class="topmenu">


      <!-- Home -->
      <li class="topmenu"><a href="/index.php">Home</a></li>



      <!-- Canada Equity ETF -->
      <li class="topmenu"><a href="/index.php#eqCanBroadMarket">Canada Equity <img src="/etf-images/down-arrow.jpg"></a>
        <ul class="submenu">
          <li><a href="/index.php#eqCanBroadMarket">Broad Market</a></li>
                  <ul class="sub-submenu">
                        <li><a href="/index.php#eqCanSS"> +++Third level menu option #1</a></li>
                        <li><a href="/index.php#eqCanREITS">+++Third level menu option #2</a></li>
                        <li><a href="/index.php#eqCanMC">+++Third level menu option #3</a></li>  
                  </ul>                  
          <li><a href="/index.php#eqCanSS">Sector Specific</a></li>
          <li><a href="/index.php#eqCanREITS">REITs (Real Estate Investment Trusts)</a></li>
          <li><a href="/index.php#eqCanMC">Mid-Cap and/or Small-Cap</a></li>         
          <li><a href="/index.php#eqCanMinVol">Minimum Volatility</a></li>
        </ul>
      </li>




      <!-- USA Equity ETF -->
      <li class="topmenu"><a href="/index.php#eqUSABroadMarket">USA Equity <img src="/etf-images/down-arrow.jpg"></a>
        <ul class="submenu">
          <li><a href="/index.php#eqUSABroadMarket">Broad Market</a></li>
          <li><a href="/index.php#eqNASDAQ">NASDAQ</a></li>
          <li><a href="/index.php#eqUSASmallCap">Small Cap</a></li>
          <li><a href="/index.php#eqUSASectorSpecific">Sector Specific</a></li>
          <li><a href="/index.php#eqUSAMinVol">Minimum Volatility</a></li>
          <li><a href="/index.php#eqUSAHighBeta">High Beta</a></li>
          <li><a href="/etfs-active.php">Actively Managed: USA Equity</a></li>
        </ul>
      </li>


    </ul>


</nav>
</nav>



</body>
</html>

The CSS code is:

@charset "utf-8";
/* CSS Document */




html {
    background: #E6E3D4;
}




body {
    font: 100% Georgia, "Times New Roman", Times, serif;
    line-height: 1.2; /* */
}




/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
.cf:before, .cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}





/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */

ul.topmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    background: #006da6; 
    height: 2em;
    width: 100%;

    font: 100% Georgia, "Times New Roman", Times, serif;
    font-size: 0.95em;

}
li.topmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
}

/* ul.sub-submenu defined - newly added as part of my third level menu mod */
/* ul.submenu defined - works great */
/* ul.topmenu defined - great great */

ul.sub-submenu, ul.submenu, ul.topmenu li a {
    display: block;
    line-height: 1.8em;
    padding: 0 1em;
    color: white;
    text-decoration: none;
    z-index:3; 
}


ul.topmenu li a:hover, ul.topmenu li:hover > a {
    background: #035c7c;
    height: 1.8em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
    text-decoration: none;
}


ul.current, a:hover.current, ul.topmenu li:hover a.current {
    background: #AD9B7F;
    background: yellow;
    color: #eee;
    padding-top: .3em;
    border-radius: .3em .3em 0 0;
    position: relative;
    top: -.3em;
    border-bottom: .3em solid #917F63;
    cursor: default;
}

ul.topmenu li:hover ul {
    left: 0;
}


/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */




/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */


ul.submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    height: 1.8em;
    width: 100%;

    float: none;
    background: #035c7c;
    background: pink;
    width: auto;
    height: auto;
    position: absolute;
    top: 1.8em;
    left: -9000em;
}
ul.submenu li {
    float: none;
}

ul.submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.submenu li:last-child a {
    border-bottom: none;
}
ul.submenu li a:hover {
    background: #15afcb;
    background: red;    
    height: 1.8em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
    text-decoration: none;
}

/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */




/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */

ul.sub-submenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    height: 1.8em;
    width: 100%;

    float: none;
    background: #035c7c;
    width: auto;
    height: auto;
    position: absolute;
    top: 1.8em;
    left: -9000em;
}
ul.sub-submenu li {
    float: none;
}

ul.sub-submenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
}
ul.sub-submenu li:last-child a {
    border-bottom: none;
}
ul.sub-submenu li a:hover {
    background: #15afcb;
    background: brown;  
    height: 1.8em;
    padding-top: .2em;
    top: 0;
    border-radius: 0;
    text-decoration: none; 
}

/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */

As any good developer knows,switching gears is a great leap forward in debugging an issue sometimes,I know this menu is rudimentary but it seems unfriendly from a user standpoint,perhaps consider more standardized design patterns that are familiar to many web surfers. Originality can be nice but this menu seems to have a far way to go to get appreciation on that level,check out different "mega menu" designs,because the fact that you are overlaying a menu on top of menu,maybe this is only for your SO question but,if not,not a good direction — Brian Ogden, Oct 03 '13 at 04:23
The opening and closing tags do not seem to match (extra `` and `` above the ``). Can you double-check this and update the question? — Zhihao, Oct 03 '13 at 04:25
look at this menu for contrast http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ — Brian Ogden, Oct 03 '13 at 04:25
@BrianOgden The usability of a non-working menu is always going to be bad. :P I'm pretty sure OP did not intend to put a menu on top of a menu. That's the broken part, which is what OP is asking us about. — Zhihao, Oct 03 '13 at 04:28
Indeed, but I should have made that clear in my problem description. The broken third level menu is supposed to display to the right of its parent menu - not over it (as shown in my screen shot). — Paul, Oct 03 '13 at 17:05
Thanks for pointing that out Zhihao - fixed. Note it did not impact code operation but indeed it was an oversight. — Paul, Oct 03 '13 at 17:13

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

I believe this is not possible with pure CSS... See here. You can't reference CSS elements through CSS.

What you can do though is use Javascript and dynamically apply the styling needed. For your scenario, I set display: none to your class sub-submenu and then added a JS script so that on hover, it would find any uls inside and show them. I also moved your sub-submenu into the li.

Working jsFiddle here: http://jsfiddle.net/8kvcN/1/

edited May 23 '17 at 12:13

Community

1
1

answered Oct 03 '13 at 04:22

aug

11,138
9
72
93

Nice aug! Can I ask a huge favor... Could you mod your demo for the third-level menu to display to the right of its parent menu. I never meant for the third-level to display over existing sub-menus. Nicely crafted solution - great job. – Paul Oct 03 '13 at 18:32
I have a hackish solution which I don't truly approve of but maybe this can be a starting point? I updated the jsFiddle but the general idea is you need to wrap your sub-submenus and move them relatively based on where the li is. If I have more time later, I might try to fix it so its better. Right now I just manually plug in numbers. – aug Oct 03 '13 at 19:06
Super Aug. Thank you SOOOOOOO much. – Paul Oct 04 '13 at 17:38

score 0 · Answer 2 · answered Oct 03 '13 at 04:25

Easiest way is using jQuery rather than css do the interaction.

You can see the DEMO here.

Here is the code of jQuery.

$('.submenu li a:first').hover(function(){
                        $('.sub-submenu').show();
                    },
                    function(){
                        $('.sub-submenu').hide();
                    });

Third level of CSS dropdown menu does not work

2 Answers2