Okay, so the answer to your question comes in a few parts. All of it is available in this fiddle. Here goes.
The Markup
First, it's easier to deal with things if a sub-menu is nested in it's link's parent li
. Also (side note) if your css fails for whatever reason, this will preserve the parent-child relationships. The new basic structure looks like this:
<div class="menu">
<ul>
<li>
<a href='#'>Link</a>
<ul>
<li>
<a href='#'>Child</a>
<ul>
<li><a href='#'>Grandchild</a></li>
</ul>
</li>
</ul>
<li>
</ul>
</div>
The Styles
In the fiddle, I have the styles separated into a couple parts, and I'll go over each.
The Reset
This is pretty straight forward. It just resets everything. It's not relevant to the solution, though, really, so I've left it out of the answer. It's in the fiddle if you need it.
The Flavor
In the fiddle, the flavor is just my own personal taste. It's mostly colors, but there is one important bit. We apply the padding to the a
elements. This'll help things line up properly and will also provide as a side-effect a nice big clickable area.
.menu a {
display: block;
padding: 10px; /* padding on the a */
color: #000;
}
The Positioning
This is the real core of the answer. What we're doing is what you've already done, except we're un-setting the float on the third-level li
. The short answer is just that line, honestly.
.menu li {
position: relative;
float: left;
}
.menu li ul { position: absolute; width: 400px; }
.menu li li ul { width: 120px; }
.menu li li li { float: none; } /* this lets columns happen again */
The Hover
To accomplish the hiding in a simpler way, we'll employ the use of the child selector (>
). If you've never used it, Chris Coyier explains it very well, but basically it only gets immediate children. That way we can say any ul
nested directly under an li
should be displayed only if that li
is being hovered. We do so like this:
.menu li > ul { display: none; }
.menu li:hover > ul { display: block; }
Edit: The MDN also has a great entry on the child selector. Check it out here.
The Demo
Again, the whole thing is demonstrated in a fiddle at http://jsfiddle.net/4tPcL/. Hope this helps!