只使用CSS创建下拉导航

Question

我有一个ul列表嵌套ul元素。目前它深入3层。 （主导航，儿童，孙子）。我似乎无法让下拉菜单正常工作。不幸的是，我无法将id放在（ul）项中。最好的我可以做的，我把ul换成div，上面带有一个ID。任何想法我怎么能做到这一点？这是我正在使用的代码，如果我的css看起来不好或者没有任何意义，我很抱歉。我是这方面的新手。

代码
http://jsfiddle.net/grem28/ZhNDZ/1/（的jsfiddle为CSS）

<div id="nav"> 
    <ul> 
     <li id="but_products" ><a href="/products">Products</a> 
      <ul> 
       <li id="but_boilers" ><a href="/products/boilers">Boilers</a></li> 
      </ul> 
     </li> 
     <li id="but_resources" ><a href="/resources">Resources</a> 
      <ul> 
       <li id="but_engineeringLibrary" ><a href="/resources/engineering_library">Engineering Library</a> 
        <ul> 
         <li id="but_detroit" ><a href="/resources/engineering_library/detroit_radiant_mea_numbers">Detroit Radiant MEA numbers</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li id="but_contactUs" ><a href="/contact_us">Contact Us</a></li> 
    </ul> 
</div> 

达明

Answer 1

这里的一个功能三层CSS下拉导航系统的一个示例：

HTML

<nav> 
    <ul> 
     <li> 
      Menu One 
      <ul> 
       <li> 
        <a href="#">Menu One Item One</a> 
        <ul> 
         <li><a href="#">Menu One Item One Submenu Item One</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Two</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Three</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Four</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Menu One Item Two</a> 
        <ul> 
         <li><a href="#">Menu One Item Two Submenu Item One</a></li> 
         <li><a href="#">Menu One Item Two Submenu Item Two</a></li> 
         <li><a href="#">Menu One Item Two Submenu Item Three</a></li> 
         <li><a href="#">Menu One Item Two Submenu Item Four</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Menu One Item Three</a> 
        <ul> 
         <li><a href="#">Menu One Item Three Submenu Item One</a></li> 
         <li><a href="#">Menu One Item Three Submenu Item Two</a></li> 
         <li><a href="#">Menu One Item Three Submenu Item Three</a></li> 
         <li><a href="#">Menu One Item Three Submenu Item Four</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Menu One Item Four</a> 
        <ul> 
         <li><a href="#">Menu One Item Four Submenu Item One</a></li> 
         <li><a href="#">Menu One Item Four Submenu Item Two</a></li> 
         <li><a href="#">Menu One Item Four Submenu Item Three</a></li> 
         <li><a href="#">Menu One Item Four Submenu Item Four</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      Menu Two 
      <ul> 
       <li><a href="#">Menu Two Item One</a></li> 
       <li><a href="#">Menu Two Item Two</a></li> 
       <li><a href="#">Menu Two Item Three</a></li> 
       <li><a href="#">Menu Two Item Four</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

CSS

body { font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; } 
a:hover { color: #cc0000; } 

/* Hide submenu */ 
nav ul > li > ul, 
nav ul > li > ul > li > ul { display:none; } 

/* Layout menubar and menus */ 
nav { background:#ddd; padding:0.25em 0.5em; } 
nav > ul > li { cursor: pointer; display:inline-block; padding:0 1em; } 
nav > ul > li > ul { background: #ddd; padding:0.5em; position: absolute; z-index: 1000; } 
nav > ul > li > ul > li > ul { background: #ccc; padding:0.5em; position: absolute; left: 90%; top: 0; z-index: 1001; } 

/* show submenu on hover */ 
nav ul > li:hover > ul, 
nav ul > li > ul > li:hover > ul { display:block; width:10em; } 

小提琴：http://jsfiddle.net/kboucher/nrAPu/

希望这有助于。