CSS Drop Down Navigation, 3rd level issue - css

Question

I'm trying to get a 3rd level of flyout/dropdown on this CSS navigation menu. The second level works great, only shows when you're hovering over the right top level link. However, the 3rd level shows when you hover over the TOP level also. It should be hidden until you hover over the right dropdown link and then flyout to the right. I have the position correct, but I need it to hide until the right link is hovered on.
Here's the site I'm working on: http://174.37.160.21 (the 3rd tier is under Products).
Here's my CSS for the whole menu. I'm sure it's something really easy to spot but I've tried all that I can think of. I'm not a CSS wizard or anything.
.menu { height:32px; position:relative; z-index:100; }
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu li {float:left;width:auto; padding-left:6px; padding-right:6px; position:relative;}
.menu ul li a { font-size:13px; }
.menu ul li ul li a { font-size:13px; }
.menu a, .menu a:visited {display:block; font-size:15px; text-decoration:none; color:#454545; height:30px; border:1px; padding-left:10px;}
.menu ul ul { visibility:hidden; position:absolute; height:0; top:20px; left:0; width:150px; }
.menu ul ul li { background:#272727; width:150px; text-align:left; padding-top:5px; padding-bottom:5px; }
.menu ul ul li:hover { background:#454545; }
.menu ul ul ul { visibility:hidden; position:absolute; height:0; top:0; left:150px; width:150px; }
.menu ul ul ul li { background:#272727; width:150px; text-align:left; padding-top:5px; padding-bottom:5px; }
.menu ul ul ul li:hover { background:#454545; }
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the table so that it takes no ppart in the layout - required for IE to work */
.menu ul ul a, .menu ul ul a:visited, .menu ul ul ul a, .menu ul ul ul a:visited { color:#fff; height:auto;}
.menu a:hover, .menu ul ul li:hover { }
.menu :hover > a, .menu ul ul :hover > a, .menu ul ul ul :hover > a {}
.menu ul li:hover ul, .menu ul a:hover ul, .menu ul ul li:hover ul { visibility:visible; }
Here's is my HTML Code:
<ul>
<li>Home
<li>About Us</li>
<li>Services
<ul>
<li>Residential</li>
<li>Commerical</li>
<li>Emergency</li>
<li>Maintenance</li>
</ul>
</li>
<li>Products
<ul>
<li>Garage Doors
<ul>
<li>Residential Garage Doors</li>
<li>Commercial Garage Doors</li>
</ul>
</li>
<li>Openers & Operators</li>
</ul>
</li>
<li>Online Store
<ul>
<li>Replacement Remotes</li>
<li>Keyless Entry</li>
<li>Gears & Sprocket Parts</li>
<li>Safety Beams</li>
<li>Lube & Grease</li>
</ul>
</li>
<li>Ask a Pro
<ul>
<li>Submit a Question</li>
<li>Newsletter</li>
<li>FAQ's</li>
<li>News</li>
<li>Seasonal Tips</li>
</ul>
</li>
</ul>

Answer 1

This is the part that makes the submenu visible:
.menu ul li:hover ul,
.menu ul a:hover ul,
.menu ul ul li:hover ul { visibility:visible; }
Now, I'm not sure what your markup is (I can only guess seeing .menu table and a:hover ul...), but with a standard list based markup, this part is too greedy:
.menu ul li:hover ul
This selects all ul elements that are in the li:hover all the way down the line, up to the very last one. I think you want to select only the direct descendant:
.menu ul li:hover > ul
All I changed was adding the > character. Demo: http://jsfiddle.net/dgUFw/
EDIT: Updated demo with the HTML you just posted: http://jsfiddle.net/dgUFw/1/
The .menu element was missing from your post, so I wrapped the whole thing in a <div class="menu"> and it seems to work fine.