Discuz! X通用经典简约二级导航

经典二级导航

演示如图：





有些站友可能会问到，之前就有这个的。回答：是的，之前的确有这个导航，但是那是用TABLE代码写的，下面分享的是用div+css写的，对于代码的优化来说，这都懂的！

演示地址：http://www.i027.com

1. <style>
   
2. .nav_menu{ width:953px; padding:5px 0 5px 5px; margin:0 auto; overflow:hidden; background:#f8f8f8; color:#999; border:1px solid #dfdfdf; border-top:none;}
   
3. .nav_menu ul li{ line-height:24px;}
   
4. .nav_menu ul li a{ margin:0 3px;}
   
5. .nav_menu1{ background:url({IMGDIR}/nav_pd.gif) no-repeat left 2px; padding:0 10px 0 35px; float:left;}
   
6. .nav_bm{ background:url({IMGDIR}/nav_bm.gif) no-repeat left 2px;}
   
7. .nav_lt{ background:url({IMGDIR}/nav_lt.gif) no-repeat left 2px;}
   
8. .nav_hy{ background:url({IMGDIR}/nav_hy.gif) no-repeat left 2px;}
   
9. </style>
   
10. 
    
11. <div class="nav_menu">
    
12.                     <div class="nav_menu1">
    
13.                         <ul>
    
14.                             <li>
    
15.                             <a ><b>爱车一族</b></a> | <a ><font color='#E11'>购物达人</font></a> | <a >家居装修</a>
    
16.                             </li>
    
17.                              <li>
    
18.                             <a ><b>综艺娱乐</b></a> | <a ><font color='#E11'>游山玩水</font></a> | <a >数码通讯</a>
    
19.                             </li>
    
20.                         </ul>
    
21.                     </div>
    
22.                     <div class="nav_menu1 nav_lt">
    
23.                         <ul>
    
24.                             <li>
    
25.                             <a ><b>武汉新闻</b></a> | <a ><font color='#E11'>谈天说地</font></a> | <a >商业信息</a>
    
26.                             </li>
    
27.                              <li>
    
28.                             <a ><b>爆料趣闻</b></a> | <a ><font color='#E11'>电话号码</font></a> | <a >求职招聘</a>
    
29.                             </li>
    
30.                         </ul>
    
31.                     </div>
    
32.                     <div class="nav_menu1 nav_bm">
    
33.                         <ul>
    
34.                             <li>
    
35.                             <a ><b>便民信息</b></a> | <a ><font color='#E11'>生活百科</font></a> | <a >男婚女嫁</a>
    
36.                             </li>
    
37.                              <li>
    
38.                             <a ><b>健康养身</b></a> | <a ><font color='#E11'>妈妈宝宝</font></a> | <a >情感驿站</a>
    
39.                             </li>
    
40.                         </ul>
    
41.                     </div>
    
42.                     <div class="nav_menu1 nav_hy">
    
43.                         <ul>
    
44.                             <li>
    
45.                             <a ><b>江城美食</b></a> | <a ><font color='#E11'>商场专卖</font></a> | <a >武汉团购</a>
    
46.                             </li>
    
47.                              <li>
    
48.                             <a ><b>江城楼市</b></a> | <a ><font color='#E11'>宠物花草</font></a> | <a >幽默笑话</a>
    
49.                             </li>
    
50.                         </ul>
    
51.                     </div>
    
52.                                 </div>

复制代码

导航图片已经打包，直接下载，放到

安装方法1：将上面代码拷贝在后台 - 运营 - 站点广告 ，选择二级导航广告位，以HTML代码广告形式。

安装方法2：将上面代码拷贝在 当然模板 - header.htm文件 “<div id="mu" class="cl">”这行代码之上；

说明：请将压缩包内图片放在当前图片存放目录内。懂的可以自行改路径。

注意：
当前使用的是953px宽度，如需更改为980px或者其他，请修改css进行。

演示地址：http://www.i027.com

有喜欢的求支持顶起来啊！

难道就没人喜欢这种风格的导航么？







www.56ads.com

鄙视只下载不顶的人

www.900yi.com 有没有交换连接的！