Drop down menu with vertical sub nav - help!

HTML & CSS
1

I’m having an issue with menus - I’m trying to style a nested nested menu item… for example,


<ul>
  <li><a href="#">Parent Menu Item</a>
      <ul>
            <li><a href="#">Child Menu Item</a>
                  <ul>
                        <li><a href="#">Child's Menu Item</a></li>
                  </ul>
            </li>
      </ul>
  </li>
</ul>

I can’t seem to get the child’s menu item to hide until hovered… I’m sure I’m just having a massive brain fart, but if somebody could refresh my memory that would be fantastic… It just gets so confusing with all the sub menu items when you’re already one level deep.

2

You didn’t post your CSS, lol.

But the basic premise behind a drop down is this :

li > ul {/your hiding method/}
li:hover > ul {/reveal metod/}

Note I am not taking IE6 support in to consideration here.

BTW a good hide/reveal method is:

li{ position:relative;}
li > ul {position:absolute; left:-999em}
li:reveal > ul {position:absolute; left:0; top:100%; margin-top:-2px}

3

Oh, dumb, here’s the first level & sub level styling… I still have no clue what I’m doing wrong

/* -------->> NAV <<<-----------*/
ul.page-nav {
display: table;
height: 30px;
list-style-type: none;
margin: 0 auto;
}
ul.page-nav li {
color: #fff;
display: inline;
float: left;
font-family: ‘Cantarell’, arial, serif;
font-size: 14px;
font-weight: bold;
line-height: 30px;
list-style-type: none;
margin: 0;
padding:0;
position: relative;
text-align: center;
text-decoration: none;
width: 128px;
_padding: 0;
_height: 30px;
_line-height: 16px;
}
ul.page-nav li a {
color: #fff;
display: block;
float: left;
font-size: 14px;
font-weight: bold;
height: 30px;
margin: 0;
padding: 0;
position: relative;
text-decoration: none;
width: 128px;
}
ul.page-nav li a:hover {
background-color: #24100c;
color: #fff;
display: inline;
float: left;
font-size: 14px;
font-weight: bold;
height: 30px;
padding: 0;
text-decoration: none;
top: 0px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
_padding: 0;
_top: 0;
}

ul.page-nav li:hover ul {
display: block;
position: absolute;
z-index: 4;
}
ul.page-nav li ul {
background-color: #EBE4C8;
display: none;
padding-top: 10px;
position: absolute;
top: 30px;
left: -16px;
}
ul.page-nav li ul li {
background-color: #EBE4C8;
font-size: 13px;
line-height: 13px;
display: inline;
margin: 0 11px 10px;
position: relative;
text-align: left;
width: 150px;
*margin: 0;
}
ul.page-nav li ul li a {
color: #24100c;
display: inline;
list-style-type: none;
padding: 0 0 0 10px;
position: relative;
text-decoration: none;
width: 150px;
margin: 0;
}
ul.page-nav li ul li a:hover {
background-color: #EBE4C8;
color: #606046;
display: inline;
list-style-type: none;
padding: 0 0 0 10px;
position: relative;
text-decoration: none;
width: 150px;
margin: 0;
}

/— sub child menu styling ----/

ul.page-nav ul li ul li:hover{
display: block;
position: absolute;
z-index: 4;
}
ul.page-nav li ul li ul {
background-color: #EBE4C8;
display: none;
padding-top: 10px;
position: absolute;
top: 0px;
left: 100px;
}
ul.page-nav li ul li ul li{
background-color: #EBE4C8;
font-size: 13px;
line-height: 13px;
display: inline;
margin: 0 11px 10px;
position: relative;
text-align: left;
width: 150px;
*margin: 0;
}
ul.page-nav li ul li ul li a {
color: #24100c;
display: inline;
list-style-type: none;
padding: 0 0 0 10px;
position: relative;
text-decoration: none;
width: 150px;
margin: 0;
}
ul.page-nav li ul li ul li a:hover {
background-color: #EBE4C8;
color: #606046;
display: inline;
list-style-type: none;
padding: 0 0 0 10px;
position: relative;
text-decoration: none;
width: 150px;
margin: 0;
}

4

Your CSS is more complex than it needs to be, and very inefficient. Check out http://nekkidblogger.com/2011/ultra-efficient-css-html-drop-menu-nekkidblogger-menu/

It does it all with five rules :slight_smile:

5