CSS 下拉导航，第 3 级问题 [英] CSS Drop Down Navigation, 3rd level issue
问题描述
我正在尝试在此 CSS 导航菜单上获得第 3 级弹出/下拉菜单.第二级效果很好，仅当您将鼠标悬停在右侧的顶级链接上时才会显示.但是，当您将鼠标悬停在 TOP 级别上时，也会显示第 3 级.它应该是隐藏的，直到您将鼠标悬停在右侧的下拉链接上，然后向右弹出.我的位置正确，但我需要隐藏它，直到将鼠标悬停在正确的链接上.
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>
推荐答案
这是使子菜单可见的部分:
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
这将选择 所有 ul 元素，这些元素在 li:hover 中一直向下，直到最后一个.我认为您只想选择直系后代:
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/
编辑:使用您刚刚发布的 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屋！
