dedecms纯CSS一级栏目下拉导航菜单

天外飘仙

dedecms纯CSS一级栏目下拉导航菜单，找了好久没找到满意的，网上的都是从以前DEDECMS5.5版本扒下来的，还要调用JS.整了半天，很多测试调用不出来，我找的这个上纯CSS，不需要修改其他网站文件，现分享给大家。

样式：

1. 
   
2. body{ font:14px "Microsoft YaHei", Arial,Verdana,tahoma, Srial, helvetica, sans-serif; line-height:1.8; color:#333; background:#fff;}
   
3. .menu {height: 40px; background: #4ba036;position: relative; z-index:999;
   
4. }
   
5. .menu a {
   
6.     text-decoration: none;display: block; padding: 0 12px; margin-right: 1px; line-height: 40px; font-size: 16px; color: #fff;
   
7. }
   
8. ul {
   
9.     margin: 0;
   
10.     padding: 0;
    
11. }
    
12. .menu li {
    
13.     list-style: none;
    
14.     float: left;
    
15.     width: 90px;
    
16.     overflow: visible;
    
17.     cursor: pointer;
    
18. }
    
19. ul.level0 {
    
20.     height: 40px;
    
21.     overflow: visible;
    
22. }
    
23. ul.level1, ul.level2, ul.level3 {
    
24.     width: 90px;
    
25.     display: none;
    
26. }
    
27. ul.level2, ul.level3 {
    
28.     margin: -28px 0 0 90px;
    
29. }
    
30. ul.level0 > li {
    
31.     height: 40px;
    
32.     line-height: 40px;
    
33.     text-align: center;
    
34.     background: #4ba036;
    
35. }
    
36. ul.level1 > li, ul.level2 > li, ul.level3 > li {
    
37.     height: 40px;
    
38.     line-height: 40px;
    
39.     background: #308a1a;
    
40. }
    
41. ul.level0 > li:hover {
    
42.     background: #308a1a;
    
43. }
    
44. ul.level1 > li:hover, ul.level2 > li:hover, ul.level3 > li:hover {
    
45.     background: #4ba036;
    
46. }
    
47. ul.level0 > li.imyeah:hover > ul, ul.level1 > li.imyeah:hover > ul, ul.level2 > li.imyeah:hover > ul, ul.level3 > li.imyeah:hover > ul {
    
48.     display: block;
    
49. }
    
50. 
    

复制代码

调用代码：

1. <div class="menu">
   
2. &#160;&#160;<div class="bar">
   
3. &#160;&#160;&#160;&#160;<ul class="level0">
   
4. &#160;&#160;&#160;&#160;&#160;&#160;<li><a href="/">首页</a></li>
   
5. &#160;&#160;&#160;&#160;&#160;&#160;{dede:channelartlist typeid="top"&#160;row='18'&#160;currentstyle="<li class='active'><a href='~typelink~' ~rel~><span>~typename~</span></a></li>"}
   
6. &#160;&#160;&#160;&#160;&#160;&#160;<li class="imyeah"><a href="{dede:field name="typeurl"/}"target="_blank">{dede:field name="typename"/}</a>
   
7. &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<ul class="level1">
   
8. &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;{dede:channel&#160;type="son"}
   
9. &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<li><a href="[field:typeurl/]"&#160;title="[field:typename/]">[field:typename/]</a></li>
   
10. &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;{/dede:channel}
    
11. &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</ul>
    
12. &#160;&#160;&#160;&#160;&#160;&#160;</li>
    
13. &#160;&#160;&#160;&#160;&#160;&#160;{/dede:channelartlist}
    
14. &#160;&#160;&#160;&#160;</ul>
    
15. &#160;&#160;</div>
    
16. </div>
    
17. 
    

复制代码