Third Tier of Drop Down Menu Disappears on Mouseover - css

Question

This is the site I'm working on: http://argumentinamerica.com
Here's the filddle for the menu I'm working on: http://jsfiddle.net/Qtfrq/
HTML:
<div id="menu">
<ul id="menu">
<li><span></span>Home</li>
<li class='has-sub'><span></span>Units
<ul>
<li class='has-sub'>Unit 1</li>
<ul class="thirdtier">
<li>Read About It</li>
<li>Write About It</li>
<li>Hear About It</li>
<li>Speak About It</li>
<li>Read About It</li>
<li>Write About It</li>
</ul>
<li class='has-sub'>Unit 2</li>
<li class='has-sub'>Unit 3</li>
<li class='has-sub'>Unit 4</li>
<li class='has-sub'>Unit 5</li>
</ul>
<li><span></span>Teacher Center</li>
<li><span></span>About</li>
<li><span></span>Give 1</li>
</ul>
</div>
CSS:
#menu {
margin: 0; padding: 2px 0px 2px 0px;
list-style-type: none;
height: 2.4em;
}
#menu ul, #menu li, #menu span, #menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu li {
float: left;
width: 20%;
}
#menu a {
display: block;
margin: 1px;
height: 2.4em;
font-size: 10px;
line-height: 2.4em;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: #ffcc66;
color: #996600;
}
#menu span {
position: absolute; top: 8px; left: 8px;
width: 8px; height: 8px;
background: #ff9933;
}
#menu a:hover {
background: #cc3300;
color: #ffcc66;
}
#menu ul{
list-style-type: none;
}
#menu .has-sub {
z-index: 1;
}
#menu .has-sub:hover > ul {
display: list-item;
}
#menu .has-sub ul {
display: none;
position: absolute;
left:0;
}
#menu .has-sub ul li {
*margin-bottom: -1px;
position: relative;
width: 100%;
height: 2.6em;
line-height: 2.4em;
}
#menu .has-sub ul li a {
background: #ff9944;
font-size: .65em;
color: ffcc66;
}
#menu .has-sub ul li a:hover,
#menu .has-sub ul li:hover > a {
background: #ff6633;
color: 993300;
}
#menu .has-sub {
z-index: 1;
}
#menu .has-sub:hover > ul {
display: list-item;
}
#menu .has-sub .has-sub:hover + ul {
display: list-item;
}
.thirdtier li {
left: 100%;
}
After much trial and error, I figured out how to get the third tier to show up when I hover over the second tier, but when I try to select something in the third tier list, it disappears. I know I'm supposed to apply a hover style to the a element so that it stays "hovered" when you hover over its child element, and I thought I did that, but it isn't working. I'd love some help on this issue.

Answer 1

Try this: http://jsfiddle.net/Qtfrq/2/
Basically a couple of small changes to your HTMl & CSS.
<div id="menu">
<ul id="menu">
<li><span></span>Home</li>
<li class='has-sub'><span></span>Units
<ul>
<li class='has-sub'>Unit 1
<ul class="thirdtier">
<li>Read About It</li>
<li>Write About It</li>
<li>Hear About It</li>
<li>Speak About It</li>
<li>Read About It</li>
<li>Write About It</li>
</ul>
</li>
<li class='has-sub'>Unit 2</li>
<li class='has-sub'>Unit 3</li>
<li class='has-sub'>Unit 4</li>
<li class='has-sub'>Unit 5</li>
</ul>
</li>
<li><span></span>Teacher Center</li>
<li><span></span>About</li>
<li><span></span>Give 1</li>
</ul>
</div>
#menu {
margin: 0; padding: 2px 0px 2px 0px;
list-style-type: none;
height: 2.4em;
}
#menu ul, #menu li, #menu span, #menu a {
margin: 0;
padding: 0;
position: relative;
}
#menu li {
float: left;
width: 20%;
}
#menu a {
display: block;
margin: 1px;
height: 2.4em;
font-size: 10px;
line-height: 2.4em;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: #ffcc66;
color: #996600;
}
#menu span {
position: absolute; top: 8px; left: 8px;
width: 8px; height: 8px;
background: #ff9933;
}
#menu a:hover {
background: #cc3300;
color: #ffcc66;
}
#menu ul{
list-style-type: none;
}
#menu .has-sub {
z-index: 1;
}
#menu .has-sub:hover > ul {
display: list-item;
}
#menu .has-sub ul {
display: none;
position: absolute;
left:0;
}
#menu .has-sub ul li {
*margin-bottom: -1px;
position: relative;
width: 100%;
height: 2.6em;
line-height: 2.4em;
}
#menu .has-sub ul li a {
background: #ff9944;
font-size: .65em;
color: ffcc66;
}
#menu .has-sub ul li a:hover,
#menu .has-sub ul li:hover > a {
background: #ff6633;
color: 993300;
}
#menu .has-sub {
z-index: 1;
}
#menu .has-sub:hover > ul {
display: list-item;
}
#menu .has-sub > .has-sub:hover + ul {
display: list-item;
}
.thirdtier {
top: 0;
}
.thirdtier li {
left: 100%;
}

Answer 2

A common mistake is to not place the nested UL inside its parent LI (which, by the way, results in invalid HTML). Because those ULs aren't part of the LI with the hover state, they don't maintain visibility.
In this case, your second level works because you aren't closing the LI tags at all. Therefore, the browser takes a guess at where it should close by looking at the next sibling LI.
You'll probably need to rework your CSS, but this is how it should be:
<ul id="menu">
<li><span></span>Home</li>
<li class='has-sub'><span></span>Units
<ul>
<li class='has-sub'>Unit 1
<ul class="thirdtier">
<li>Read About It</li>
<li>Write About It</li>
<li>Hear About It</li>
<li>Speak About It</li>
<li>Read About It</li>
<li>Write About It</li>
</ul>
</li>
<li class='has-sub'>Unit 2</li>
<li class='has-sub'>Unit 3</li>
<li class='has-sub'>Unit 4</li>
<li class='has-sub'>Unit 5</li>
</ul>
</li>
<li><span></span>Teacher Center</li>
<li><span></span>About</li>
<li><span></span>Give 1</li>
</ul>