纯css代码编写导航下拉菜单

rain

1、使用绝对定位，写好下拉菜单的颜色、宽度，最后定义为不显示。（display:none;）
2、一级悬停的时候，再定义为显示。（display:block;）

范例：
div框架部分：

1. <div class="nav">
   
2.           <ul>
   
3.               <li  ><a href="#">Home</a>
   
4.                   <ul >
   
5.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
   
6.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
   
7.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
   
8.       </ul></li>
   
9.                   <li  ><a href="#">About us</a>
   
10.                   <ul >
    
11.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
    
12.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
    
13.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
    
14.       </ul></li>
    
15.                   <li  ><a href="#">Products</a>
    
16.                   <ul >
    
17.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Design</a></li>
    
18.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Development</a></li>
    
19.         <li > <a href="http://www.lanrentuku.com/" target="_blank">Web Hosting</a></li>
    
20.       </ul></li>
    
21.                   <li  ><a href="#">News</a></li>
    
22.                   <li  ><a href="#">Feedback</a></li>
    
23.                   <li  ><a href="#">Contact us</a></li>
    
24.            </ul>
    
25.            <div class="cla"></div>
    
26.         </div>

复制代码

css部分：

1. .nav{ font-size:16px; padding-left:30px;}
   
2. .nav ul li{ float:left; background:url(../img/nav.png) no-repeat;}
   
3. .nav li:first-child{ background:none;}
   
4. .nav li a{ width:110px; text-align:center; padding:14px 0; display:block; color:#333333;}
   
5. .nav li a:hover{ color:#6699FF; background:url(../img/navhover.png);}
   
6. .nav li:first-child a:hover{ background:url(../img/navhover.png) -2px; color:#FFCC33;}
   
7. .nav li:first-child ul li a:hover{ background:none; background-color:rgba(0, 0, 0, 0.1); color:#3399CC;}
   
8. .nav ul li ul { display:none;position: absolute;width: 220px;z-index:1000;background-color: #9b59b6;}
   
9. .nav ul li:hover ul {display: block;}
   
10. .nav ul li ul li {background:none; }
    
11. .nav ul li ul li a{ color:#FFFFFF; display: block; text-align:left;padding: 8px 0 8px 15px; width:205px;    }
    
12. .nav ul li ul li a:hover { background: rgba(0, 0, 0, 0.1);}
    
13. .nav ul li ul li:first-child a:hover{ background: rgba(0, 0, 0, 0.1); color:#3399CC;}

复制代码