0

我想向网站添加一个仅 CSS 的下拉菜单。我只需一滴就可以做到这一点，但是在向菜单添加另一层时遇到了麻烦。

我可以让列表最初隐藏，但是当触发器悬停时，整个列表变得可见，而不仅仅是下拉列表的第一层。

这是列表的一部分：

 <ul id="DealerNav">
<li><a href="#" class="first">Order from your dealer</a>
    <ul>
    <li><a href="#">BFC Syringe (empty)</a>
            <ul>
            <li><a href="http://www.atlantadental.com" target="_blank">Atlanta Dental</a></li>
            <li><a href="http://www.benco.com" target="_blank">Benco Dental</a></li> 
       </ul> 
    </li> 
    <li><a href="#">BFC Complete</a>
          <ul>
          <li><a href="http://practicon.com/Harmony-Intro-Pack/p/70-90122/" target="_blank">Practicon Dental</a></li>
          </ul>
             </li>
    <li><a href="#">Vaccu•sil Heavy Body</a>
         <ul>
            <li><a href="http://www.atlantadental.com" target="_blank">Atlanta Dental</a></li>
            <li><a href="http://www.benco.com" target="_blank">Benco Dental</a></li> 
             <li><a href="http://www.burkhartdental.com" target="_blank">Burkhart Dental</a></li>

       </ul> 
    </li>      
  </ul>

而且，这是控制它的 CSS：

#DealerNav { margin: 0; padding: 0; font-weight: bold; }

#DealerNav li { list-style-type: none; font-size: 100%; position: relative; margin-left: -3em; }

#DealerNav li li { margin: 2px 0; }

#DealerNav li ul { display: none; }

#DealerNav a.first { width:100%; color: #555; background-color: #FFF; margin-left: 2.5em; }

#DealerNav a { display:block; width: 12em; padding: .5em; background-color: #CEF; color: #FFF;  }

#DealerNav a:hover { color: #555; }

#DealerNav a:hover.first { color: #CEF; }

#DealerNav li:hover ul { display: block; }

#DealerNav ul ul { margin-left:10em; margin-top: -2.25em; }

这是否太复杂而无法寻求帮助？

有问题的页面暂时位于： http: //www.hodentalcompany.com/pages/syringe2.html

菜单位于文本右栏的底部，“从您的经销商处订购”

感谢大家的帮助！

4

2 回答 2

1

像这样？

http://jsfiddle.net/kboucher/nrAPu/

于 2012-10-10T18:01:34.643 回答
1

改变这个：

#DealerNav li:hover ul { display: block;}

对此：

#DealerNav li:hover > ul { display: block; }

您只希望显示第一个子 UL，而不是全部显示。

于 2012-10-10T18:02:29.010 回答