分享一个实用好看的二级导航，适合dz各版本，喜欢的顶

直接从早安网上拿下来的。
废话少说，先上效果图，好看实用吧，喜欢的帮顶一个哈


真实效果也可以到下面演示地址查看：
演示一：http://demo.vzaoan.com/dzx3/1201/
演示二：http://demo.vzaoan.com/dzx3/1203/

有什么问题或者需要帮助或者模版的也可以直接联系我QQ：1185500850
方法很简单，几步既可以拥有一个漂亮的二级导航。

第一步：把下面代码添加到目录“/template/default/common/”的“header.htm”文件中“<!--{ad/subnavbanner/a_mu}-->”前面；

1. <div class="vzaoan_board">
   
2. <div class="vzaoan_1">
   
3.   <div class="vzaoan_bh1 z"></div>
   
4.   <div class="vzaoan_nav_r">
   
5.    <ul><li><a target="_blank" href="forum-2-1.html">早安茶座</a></li>
   
6.    <li><a target="_blank" href="forum-37-1.html">我爱美食</a></li></ul>
   
7.   </div>
   
8.     <div class="vzaoan_nav_r">
   
9.    <ul><li><a target="_blank" href="forum-36-1.html">谈天说地</a></li>
   
10.    <li><a target="_blank" href="forum-38-1.html">游山玩水</a></li></ul>
    
11.   </div>
    
12. </div>
    
13. <div class="vzaoan_2">
    
14.   <div class="vzaoan_bh2 z"></div>
    
15.   <div class="vzaoan_nav_r">
    
16.    <ul><li><a target="_blank" href="topic-house.html">房产</a></li>
    
17.    <li><a target="_blank" href="topic-home.html">家装</a></li>
    
18.    <li><a target="_blank" href="forum-43-1.html">汽车</a></li>
    
19. <li><a target="_blank" href="forum-42-1.html">婚嫁</a></li></ul>
    
20.   </div>
    
21.   <div class="vzaoan_nav_r">
    
22. <ul><li><a target="_blank" href="forum-39-1.html">母婴</a></li>
    
23.    <li><a target="_blank" href="forum-55-1.html">教育</a></li>
    
24.    <li><a target="_blank" href="forum-44-1.html">情感</a></li>
    
25.    <li><a target="_blank" href="forum-57-1.html">休闲</a></li></ul>
    
26.   </div>
    
27. </div>
    
28. <div class="vzaoan_3">
    
29.   <div class="vzaoan_bh3 z"></div>
    
30.   <div class="vzaoan_nav_r">
    
31.    <ul><li><a target="_blank" href="forum-45-1.html">摄影</a></li>
    
32.    <li><a target="_blank" href="forum-56-1.html">体育</a></li>
    
33.    <li><a target="_blank" href="forum-53-1.html">宠物</a></li></ul>
    
34.   </div>
    
35.   <div class="vzaoan_nav_r">
    
36.    <ul><li><a target="_blank" href="forum-52-1.html">电影</a></li>
    
37.    <li><a target="_blank" href="forum-52-1.html">音乐</a></li>
    
38.    <li><a target="_blank" href="forum-57-1.html">钓鱼</a></li></ul>
    
39.   </div>
    
40. </div>
    
41. <div class="vzaoan_4">
    
42.   <div class="vzaoan_bh4 z"></div>
    
43.   <div class="vzaoan_nav_r">
    
44.    <ul><li><a target="_blank" href="forum-65-1.html">商业服务</a></li>
    
45.    <li><a target="_blank" href="forum-46-1.html">招聘</a></li>
    
46.    <li><a target="_blank" href="forum-68-1.html">求职</a></li>
    
47.    <li><a target="_blank" href="forum-67-1.html">商家</a></li>
    
48.    <li><a target="_blank" href="forum-62-1.html">公益</a></li></ul>
    
49.    </div>
    
50.    <div class="vzaoan_nav_r">
    
51.    <ul><li><a target="_blank" href="forum-54-1.html">生活服务</a></li>
    
52.    <li><a target="_blank" href="forum-50-1.html">租房</a></li>
    
53.    <li><a target="_blank" href="forum-63-1.html">售房</a></li>
    
54.    <li><a target="_blank" href="forum-41-1.html">二手</a></li>
    
55.    <li><a target="_blank" href="forum-51-1.html">站务</a></li></ul>
    
56.    </div>
    
57. </div>
    
58. </div>

复制代码

第二步：把下面代码添加到目录“/template/default/common/”的“common.css”文件底部；

1. .vzaoan_board{background:#FFF;height:52px;border:1px solid #d7e1f4;border-top:none;padding:10px 0;}
   
2. .vzaoan_board .vzaoan_nav_r li {float:left;overflow: hidden;font-size:14px;line-height:18px;}
   
3. .vzaoan_board .vzaoan_nav_r li a{float:left;border:1px solid #ffffff;margin-right:6px;padding:4px;color:#616161;}
   
4. .vzaoan_board .vzaoan_nav_r li a:hover{background-color:#dfe9fb;color:#616161;text-decoration:none;border:1px solid #a2c0f9;margin-right:6px;padding:4px;}
   
5. .vzaoan_1{float:left;width:197px;padding:0 0 0 15px;}
   
6. .vzaoan_1 .vzaoan_nav_r{float:left;width:145px; margin-left:10px; border-right:1px solid #d7e1f4;}
   
7. .vzaoan_2{float:left;width:230px;padding:0 0 0 5px;}
   
8. .vzaoan_2 .vzaoan_nav_r{float:left;width:180px; margin-left:10px; border-right:1px solid #d7e1f4;}
   
9. .vzaoan_3{float:left;width:187px;padding:0 0 0 13px;}
   
10. .vzaoan_3 .vzaoan_nav_r{float:left;width:137px; margin-left:10px; border-right:1px solid #d7e1f4;}
    
11. .vzaoan_4{float:left;width:300px;padding:0 2px 0 8px;}
    
12. .vzaoan_4 .vzaoan_nav_r{float:left;width:250px; margin-left:10px; border-right:0px solid #d7e1f4;}
    
13. .vzaoan_bh1{width:38px; height:55px; background:url({IMGDIR}/vzaoan_dh.gif) no-repeat 0 -55px;}
    
14. .vzaoan_bh2{width:38px; height:55px; background:url({IMGDIR}/vzaoan_dh.gif) no-repeat 0px 0px;}
    
15. .vzaoan_bh3{width:38px; height:55px; background:url({IMGDIR}/vzaoan_dh.gif) no-repeat -44px -55px;}
    
16. .vzaoan_bh4{width:38px; height:55px; background:url({IMGDIR}/vzaoan_dh.gif) no-repeat -44px 0px;}

复制代码

第三步：把下面附件图片下载放置“/static/image/common/”目录里面。


第四步：到你网站后台“--界面--风格管理--更新css缓存”即可拥有这个好看实用的二级导航了，喜欢的帮顶一下哦。