版纳乐活网精美的版块二级导航

演示地址www.lohuo.com


背景图片素材下载

1. <style type="text/css">
   
2. <!--
   
3. .qing_newsubnav{width:1200px;background:#fff;border:1px solid #EEE;margin-top:0px;margin-right:auto;margin-bottom:10px;margin-left:auto}
   
4. .qing_newsubnav .top-list{padding-left:20px}
   
5. .qing_newsubnav .q_citem{position:relative;z-index:99;display:block;width:110px;height:108px;margin-right:6px;float:left;text-align:center;font-size:14px}
   
6. .qing_newsubnav .q_citem a{text-decoration:none;color:#444}
   
7. .qing_newsubnav .q_citem .q_cimg{display:block;width:58px;height:58px;margin:12px 26px;transition:all 0.2s ease 0s;background-image:url(subnv.png)}
   
8. .qing_newsubnav .q_citem a:hover{color:#D8624F;cursor:pointer}
   
9. .qing_newsubnav .q_citem p{display:block;margin-top:-5px}
   
10. .qing_newsubnav .ico1 .q_cimg{background-position:-579px 0px}
    
11. .qing_newsubnav .ico1:hover .q_cimg{background-position:-579px -102px}
    
12. .qing_newsubnav .ico2 .q_cimg{background-position:-508px 0px}
    
13. .qing_newsubnav .ico2:hover .q_cimg{background-position:-508px -102px}
    
14. .qing_newsubnav .ico3 .q_cimg{background-position:0px 0px}
    
15. .qing_newsubnav .ico3:hover .q_cimg{background-position:0px -102px}
    
16. .qing_newsubnav .ico4 .q_cimg{background-position:-63px 0px}
    
17. .qing_newsubnav .ico4:hover .q_cimg{background-position:-63px -102px}
    
18. .qing_newsubnav .ico5 .q_cimg{background-position:-126px 0px}
    
19. .qing_newsubnav .ico5:hover .q_cimg{background-position:-126px -102px}
    
20. .qing_newsubnav .ico6 .q_cimg{background-position:-190px 0px}
    
21. .qing_newsubnav .ico6:hover .q_cimg{background-position:-190px -102px}
    
22. .qing_newsubnav .ico7 .q_cimg{background-position:-318px 0px}
    
23. .qing_newsubnav .ico7:hover .q_cimg{background-position:-318px -102px}
    
24. .qing_newsubnav .ico8 .q_cimg{background-position:-381px 0px}
    
25. .qing_newsubnav .ico8:hover .q_cimg{background-position:-381px -102px}
    
26. .qing_newsubnav .ico9 .q_cimg{background-position:-443px 0px}
    
27. .qing_newsubnav .ico9:hover .q_cimg{background-position:-443px -102px}
    
28. .qing_newsubnav .ico10 .q_cimg{background-position:-663px 0px}
    
29. .qing_newsubnav .ico10:hover .q_cimg{background-position:-663px -102px}
    
30. -->
    
31. </style>
    
32. <div class="qing_newsubnav cl">
    
33.     <ul class="top-list">
    
34. [loop]
    
35.         <li class="q_citem ico{currentorder}
    
36. "><a href="{url}
    
37. " target="_blank"><span class="q_cimg"></span><p>{title}
    
38. </p></a></li>
    
39. </ul>
    
40. [/loop]
    
41. </div>

复制代码