CSS 下拉导航，第 3 级问题

Question

我正在尝试在此 CSS 导航菜单上获得第三级弹出/下拉菜单。第二级效果很好，仅在您将鼠标悬停在右侧顶级链接上时显示。但是，当您将鼠标悬停在 TOP 级别上时，也会显示第 3 级。它应该被隐藏，直到您将鼠标悬停在右侧的下拉链接上，然后弹出到右侧。我的位置正确，但我需要它隐藏，直到正确的链接悬停在上面。

这是我正在开发的网站：http://174.37.160.21（第 3 层位于 Products 下）。

这是整个菜单的 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>

Answer 1

这是使子菜单可见的部分：

.menu ul li:hover ul,
.menu ul a:hover ul,
.menu ul ul li:hover ul { visibility:visible; }

现在，我不确定您的标记是什么（我只能猜测看到 .menu table 和 a:hover ul...），但是对于基于标准列表的标记，这部分太贪心了：

.menu ul li:hover ul

这会选择所有 ul 元素，这些元素一直位于li:hover 中，一直到最后一个。我认为您只想选择直系后代：

.menu ul li:hover > ul

我所做的只是添加了> 字符。演示：http://jsfiddle.net/dgUFw/

编辑：使用您刚刚发布的 HTML 更新演示：http://jsfiddle.net/dgUFw/1/

您的帖子中缺少.menu 元素，因此我将整个内容包裹在<div class="menu"> 中，它似乎工作正常。