简洁大气的二级导航样式 方便实用

在参考其他二级导航样式的基础上，修改出来用于自己论坛的简洁大气二级导航，预览效果如下：


具体二级导航代码内容如下：
<STYLE type="text/css">
.wapNote,.colNav4t dl,.colNav4t dt,.colNav4t dd a:hover,.colNav4t dd a:hover span,#miniSearch .btn-search,.navAd,.colNav4t dl div em{ background:url("") no-repeat;}
.wapNote {position:absolute;left:205px;top:36px;padding-left:15px;line-height:16px;_width:180px;color:#00AAD1;}
.wapNote a {color:#ff6600;}
.wapNote a:hover {text-decoration:underline;}
#colNav4t { height:58px; padding:1px; _margin-top:5px;
margin-bottom:5px; color:#325E7F;
font:14px/1.5 Tahoma,Helvetica,Arial,"5b8b4f53";}
.colNav4t { background:#FEFEFE;}
.colNav4t a { color:#333333;}
.colNav4t dl { float:left; position:relative; z-index:1; padding:5px 5px 3px 14px; height:48px;}
.colNav4t dl.navShopping { width:250px; padding-left:10px; background:none;clear:left}
.colNav4t dl.navLife { width:280px;}
.colNav4t dl.navTalk { width:175px;}
.colNav4t dl.navService { width:175px;}
.colNav4t dt { float:left; width:28px; margin-top:1px; text-align:center; font-size:14px; color:#5FBA36;}
.colNav4t dl.navLife dt { background-position:-620px -55px;}
.colNav4t dl.navTalk dt { background-position:-651px -55px;}
.colNav4t dl.navService dt { background-position:-681px -55px;}
.colNav4t dd { margin-left:10px;border-right:dashed thin #CCC;}
.colNav4t dd a,.colNav4t dd a span { display:inline-block;zoom:1;*display:inline;}
.colNav4t dd a {margin-bottom:2px;margin-right:2px;font-size:14px;}
.colNav4t dd a span { position:relative; z-index:0; right:-2px; padding:0 7px 0 5px;padding-top:1px9;height:22px;line-height:22px;*cursor:pointer;}
.colNav4t dd a:hover { text-decoration:none; color:#FF6C00;}
.colNav4t dd a:hover,.colNav4t dd a:hover span {background-position:-882px -153px;}
.colNav4t dd a:hover span { background-position:100% -153px;}
.colNav4t dl div { position:absolute; right:-2px; top:55px;width:103px}
.colNav4t dl div em { position:absolute; top:-6px; _top:-4px; right:4px; width:8px; height:8px; overflow:hidden; background-position:100% -19px;}
.colNav4t dl p { display:none; margin-top:5px; _margin-top:7px; padding:0 7px 5px 4px; border:1px solid #DDD; border-top:none; background:#FFF;}
.colNav4t dl.moreOn { background-color:#FFF;}
.colNav4t dl.moreOn em { display:none;}
</style>
<div id="colNav4t">
<div class="colNav4t cf">
<dl class="navShopping">
<dt>制冷专区</dt>
<dd>
<a href="forum.php?mod=forumdisplay&fid=36" title="制冷新手互助问答"><span>互助问答</span></a>
<a href="forum.php?mod=forumdisplay&fid=38" title="空调制冷技术知识&施工安装讨论"><span>施工安装</span></a>
<a href="forum.php?mod=forumdisplay&fid=39" title="制冷售后维修保养讨论"><span>售后维修</span></a>
<a href="forum.php?mod=forumdisplay&fid=40" title="制冷技术资料工具共享"><span>资料工具</span></a>
<a href="forum.php?gid=37" title="制冷、中央空调品牌俱乐部"><span>制冷品牌</span></a>
<a href="forum.php?mod=forumdisplay&fid=44" title="中央空调选型、设计方案共享"><span>中央空调</span></a>
</dd>
</dl>
<dl class="navLife"><dt>压缩机区</dt>
<dd>
<a href="forum.php?mod=forumdisplay&fid=188" title="空压机新手互助问答"><span>互助问答</span></a>
<a href="forum.php?mod=forumdisplay&fid=96" title="各类型压缩机、空压机讨论"><span>各类空压机</span></a>
<a href="forum.php?mod=forumdisplay&fid=131" title="压缩机、空压机资料工具共享"><span>资料共享</span></a>
<a href="forum.php?mod=forumdisplay&fid=130" title="压缩机、空压机技术及维修保养"><span>维修保养</span></a>
<a href="forum.php?gid=133" title="压缩机、空压机品牌俱乐部"><span>空压机品牌</span></a>
<a href="forum.php?mod=forumdisplay&fid=175" title="真空泵技术及资料交流"><span>真空技术</span></a>
</dd>
</dl>
<dl class="navTalk">
<dt>综合讨论</dt><dd>
<a href="forum.php?mod=forumdisplay&fid=176" title="综合技术资料分享"><span>综合资料</span></a>
<a href="forum.php?mod=forumdisplay&fid=135" title="市场畅谈及品牌营销"><span>市场营销</span></a>
<a href="forum.php?mod=forumdisplay&fid=136" title="行业供求信息发布"><span>行业供求</span></a>
<a href="forum.php?mod=forumdisplay&fid=137" title="产品美图美库"><span>美图美库</span></a>
</dd>
</dl>
<dl class="navService">
<dt>特色服务</dt>
<dd>
<a href="forum.php?gid=138" title="各地区求职招聘、信息交流区"><span>求职招聘</span></a>
<a href="plugin.php?id=auction" title="用冰霜币兑换精美奖品"><span>奖品兑换</span></a>
<a href="home.php" title="进入个人家园发表日志等"><span>我的家园</span></a>
<a href="home.php?mod=space" title="在论坛安下自己的小家 装扮个人空间"><span>我的空间</span></a>
</dd>
</dl></div>
</div>

直接把以上代码在后台添加二级导航里既可，本站www.coolling.net已经实用上欢迎大家前往查看完整效果。

欢迎大家拍砖

简洁大气 、经典的二级导航代码 独家放送了

还好啦，可以看看这个www.deyanger.com的导航

实用  好用  。。

方便 实用 哈哈  不错

能问下绿色那里是图片还是文字的？

绿色的也是文字，可以自由更改。详细绝对好用使用、

很大气的说哈