Question

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

以下是我正在处理的网站：http://174.37.160.21（第3层位于产品下）。

这是我整个菜单的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">中，似乎工作正常。

CSS下载导航，第3级问题

1 个答案: