纯css的导航下拉菜单

在落伍 转过来的`！

1. <style>
   
2. .Nav {
   
3. 
   
4. }
   
5. .Nav li{
   
6.   float:left;
   
7.   display:block;
   
8.   position:relative;
   
9. }
   
10. .Nav a{
    
11.   float:left;
    
12.   display:block;
    
13.   position:relative;
    
14.   padding:2px 10px 2px 10px;
    
15.   font-size:13px;
    
16.   text-decoration: none;
    
17. }
    
18. .Nav li a:hover
    
19. {
    
20.   color:#ffffff;
    
21.   background:#ea0000;
    
22. }
    
23. .Nav li table {
    
24.   display:none;
    
25.   border-collapse:collapse;
    
26. }
    
27. .Nav li:hover table, .Nav a:hover table {
    
28.   display:block;
    
29.   position:absolute;
    
30.   top:18px;
    
31.   left:0;
    
32.   background:#ea0000;
    
33. }
    
34. .Nav li:hover table a, .Nav a:hover table a {
    
35.   float:none;
    
36.   background:#f2f2f2;
    
37.   color:#000;
    
38.   width:120px;
    
39.   border-bottom:1px solid #fff;
    
40. }
    
41. .Nav li:hover table a:hover, .Nav a:hover table a:hover {
    
42.   background:#565656;
    
43.   color:#fff;
    
44. }
    
45. </style>
    
46. 
    
47. <div class='Nav'>
    
48. <li>
    
49.   <a href='#'>产品
    
50.   <table><tr><td>
    
51.     <a href='#1'>内容管理系统</a>
    
52.     <a href='#2'>竞争情报系统</a>
    
53.   </td></tr></table>
    
54.   </a>
    
55. </li>
    
56. <li>
    
57.   <a href='#'>客户服务
    
58.   <table><tr><td>
    
59.     <a href='#1'>技术支持</a>
    
60.     <a href='#2'>留言反馈</a>
    
61.     <a href='#3'>在线帮助</a>
    
62.   </td></tr></table>
    
63.   </a>
    
64. </li>
    
65. </div>

复制代码

要看效果的！ 方法是复制上面的代码保存本地HTM 网页打开就可以拉！~

友情路过一个!

截了个图片。支持。

还不错 哈哈 ```

这个还用代码吗?做个FLASH就是了!!

这样的改动方便些吧`！~
各有各的好``