CSS下拉导航，第3级问题 [英] CSS Drop Down Navigation, 3rd level issue
问题描述
我想在这个CSS导航菜单上获得第三级的弹出/下拉。第二级工作很好，只有当你悬停在右顶层链接时才会显示。然而，第三级显示当你悬停在TOP级别也。它应该是隐藏的，直到你悬停在右下拉链接，然后向右飞出。我的位置是正确的，但我需要它隐藏，直到正确的链接悬停。
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.
以下是我正在处理的网站： http://174.37.160.21 （第三层在产品下）。
Here's the site I'm working on: http://174.37.160.21 (the 3rd tier is under Products).
这是我的整个菜单的CSS。我相信这是很容易发现，但我已经尝试了所有我可以想到的东西。我不是一个CSS向导或任何东西。
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; }
这是我的HTML代码：
Here's is my HTML Code:
<ul>
<li><a href="/">Home</a>
<li><a href="/about-us.html">About Us</a></li>
<li><a href="/garage-door-services.html">Services</a>
<ul>
<li><a href="/residential-garage-door-services.html">Residential</a></li>
<li><a href="/commercial-overhead-door-services.html">Commerical</a></li>
<li><a href="/emergency-door-repair-services.html">Emergency</a></li>
<li><a href="/garage-door-preventative-maintenance.html">Maintenance</a></li>
</ul>
</li>
<li><a href="/garage-door-products.html">Products</a>
<ul>
<li><a href="#">Garage Doors</a>
<ul>
<li><a href="#">Residential Garage Doors</a></li>
<li><a href="#">Commercial Garage Doors</a></li>
</ul>
</li>
<li><a href="#">Openers & Operators</a></li>
</ul>
</li>
<li><a href="#">Online Store</a>
<ul>
<li><a href="/replacement-garage-door-remotes.html">Replacement Remotes</a></li>
<li><a href="/keyless-garage-entry.html">Keyless Entry</a></li>
<li><a href="/garage-door-gears-sprockets-parts.html">Gears & Sprocket Parts</a></li>
<li><a href="/garage-door-safety-beams.html">Safety Beams</a></li>
<li><a href="/garage-door-lube-grease.html">Lube & Grease</a></li>
</ul>
</li>
<li><a href="/contact-us.html">Ask a Pro</a>
<ul>
<li><a href="#">Submit a Question</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Seasonal Tips</a></li>
</ul>
</li>
</ul>
推荐答案
这是使子菜单可见的部分： / p>
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; }
现在，我不知道你的标记是什么（我只能猜到看到 .menu table 和 a：hover ul ...），但是使用基于标准列表的标记，这部分太贪婪：
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
这将选择 li：hover中的全部 ul code>一路下来，直到最后一个。我想你只想选择直接后代：
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
我更改的是添加> 字符。演示： http://jsfiddle.net/dgUFw/
All I changed was adding the > character. Demo: http://jsfiddle.net/dgUFw/
EDIT ：使用您刚刚发布的HTML更新了演示： http：// jsfiddle .net / dgUFw / 1 /
EDIT: Updated demo with the HTML you just posted: http://jsfiddle.net/dgUFw/1/
您的讯息中缺少 .menu 元素，我把整个事情包装在< div class =menu> ，它似乎工作得很好。
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.
这篇关于CSS下拉导航，第3级问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
