我正试图在这个CSS导航菜单上获得第三级的弹出/下拉菜单.第二级效果很好,只有当您将鼠标悬停在正确的顶级链接上时才会显示.但是,当你将鼠标悬停在TOP级别时,第3级显示.它应该被隐藏,直到您将鼠标悬停在右下拉链接上,然后向右飞出.我的位置是正确的,但我需要隐藏它,直到右边的链接悬停.
这是我正在处理的网站：http://174.37.160.21(第三层在产品下).
这是我整个菜单的CSS.我确信它很容易被发现,但我已经尝试了所有我能想到的东西.我不是CSS向导或任何东西.
.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代码：
<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>
解决方法
这是使子菜单可见的部分：
.menu ul li:hover ul,.menu ul ul li:hover ul { visibility:visible; }
现在,我不确定你的标记是什么(我只能猜测看到.menu表和a：悬停ul …),但是使用基于标准列表的标记,这部分太贪心了：
.menu ul li:hover ul
这将选择li中的所有ul元素：一直向下悬停,直到最后一个.我想你只想选择直系后代：
.menu ul li:hover > ul
我改变的是添加>字符.演示：http://jsfiddle.net/dgUFw/
编辑：使用您刚发布的HTML更新了演示：http://jsfiddle.net/dgUFw/1/
您的帖子中缺少.menu元素,因此我将整个内容包装在< div class =“menu”>中它似乎工作正常.
