分享一款比较美观的二级导航代码

比较简单，进入后台，运营，广告，二级导航，添加广告，帖到代码里就可以看到效果了。

转自第四城的设计

演示站点：HR论坛　　中山论坛

1. <STYLE type="text/css">
   
2. .wapNote,.colNav4t dl,.colNav4t dt,.colNav4t dd a:hover,.colNav4t dd a:hover span,#miniSearch .btn-search,.navAd,.colNav4t dl div em{ background:url(http://bbs.hr369.com/static/image/common/index_bg.png) no-repeat;}
   
3. .wapNote {position:absolute;left:205px;top:36px;padding-left:15px;line-height:16px;_width:180px;color:#00AAD1;background-position:-988px -260px;}
   
4. .wapNote a {color:#ff6600;}
   
5. .wapNote a:hover {text-decoration:underline;}
   
6. 
   
7. #colNav4t { height:58px; padding:1px; _margin-top:5px;
   
8. margin-bottom:5px; color:#325E7F;
   
9. font:14px/1.5 Tahoma,Helvetica,Arial,"5b8b4f53";}
   
10. 
    
11. .colNav4t { background:#F6F6F6;}
    
12. .colNav4t a { color:#325E7F;}
    
13. .colNav4t dl { float:left; position:relative; z-index:1; padding:8px 8px 3px 14px; height:48px; background-position:-315px -120px;}
    
14. .colNav4t dl.navShopping { width:260px; padding-left:10px; background:none;clear:left}
    
15. .colNav4t dl.navLife { width:260px;}
    
16. .colNav4t dl.navTalk { width:180px;}
    
17. .colNav4t dl.navService { width:160px;}
    
18. .colNav4t dt { float:left; width:28px; margin-top:1px; text-align:center; font-size:12px; color:#5FBA36; padding-top:25px;
    
19. background-position:-589px -55px;}
    
20. .colNav4t dl.navLife dt { background-position:-620px -55px;}
    
21. .colNav4t dl.navTalk dt { background-position:-651px -55px;}
    
22. .colNav4t dl.navService dt { background-position:-681px -55px;}
    
23. .colNav4t dd { margin-left:30px;}
    
24. .colNav4t dd a,.colNav4t dd a span { display:inline-block;zoom:1;*display:inline;}
    
25. .colNav4t dd a {margin-bottom:2px;margin-right:2px;font-size:14px;}
    
26. .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;}
    
27. 
    
28. .colNav4t dd a:hover { text-decoration:none; color:#FF6C00;}
    
29. .colNav4t dd a:hover,.colNav4t dd a:hover span {background-position:-882px -153px;}
    
30. .colNav4t dd a:hover span { background-position:100% -153px;}
    
31. 
    
32. .colNav4t dl div { position:absolute; right:-2px; top:55px;width:103px}
    
33. .colNav4t dl div em { position:absolute; top:-6px; _top:-4px; right:4px; width:8px; height:8px; overflow:hidden; background-position:100% -19px;}
    
34. .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;}
    
35. .colNav4t dl.moreOn { background-color:#FFF;}
    
36. .colNav4t dl.moreOn em { display:none;}
    
37. </style>
    
38. <div id="colNav4t"><div class="colNav4t cf"><dl class="navShopping"><dt>模块</dt><dd>
    
39. <a target="_blank" href="http://bbs.hr369.com/forum-25-1.html"><span>战略规划</span></a>
    
40. <a target="_blank" href="http://bbs.hr369.com/forum-29-1.html"><span>招聘配置</span></a>
    
41. <a target="_blank" href="http://bbs.hr369.com/forum-6-1.html"><span>培训开发</span></a>
    
42. <a target="_blank" href="http://bbs.hr369.com/forum-7-1.html"><span>绩效管理</span></a>
    
43. <a target="_blank" href="http://bbs.hr369.com/forum-30-1.html"><span>薪酬福利</span></a>
    
44. <a target="_blank" href="http://bbs.hr369.com/forum-31-1.html"><span>劳动关系</span></a>
    
45. </dd>
    
46. </dl>
    
47. <dl class="navLife"><dt>综合</dt><dd>
    
48. <a target="_blank" href="http://bbs.hr369.com/forum-21-1.html"><span>综合讨论</span></a>
    
49. <a target="_blank" href="http://bbs.hr369.com/forum-117-1.html"><span>职业生涯</span></a>
    
50. <a target="_blank" href="http://bbs.hr369.com/forum-46-1.html"><span>案例分析</span></a>
    
51. <a target="_blank" href="http://bbs.hr369.com/forum-129-1.html"><span>校园招聘</span></a>
    
52. <a target="_blank" href="http://bbs.hr369.com/forum-26-1.html"><span>企业文化</span></a>
    
53. <a target="_blank" href="http://bbs.hr369.com/forum.php?gid=48"><span>资料下载</span></a>
    
54. </dd>
    
55. </dl>
    
56. <dl class="navTalk">
    
57. <dt>家园</dt><dd>
    
58. <a target="_blank" href="http://home.hr369.com/home.php?mod=space"><span>人资空间</span></a>
    
59. <a target="_blank" href="http://home.hr369.com/home.php?mod=space&diy=yes"><span>空间设计</span></a>
    
60. <a target="_blank" href="http://home.hr369.com/home.php?mod=task"><span>金币任务</span></a>
    
61. <a target="_blank" href="http://home.hr369.com/home.php?mod=spacecp&ac=profile&op=verify"><span>实名认证</span></a>
    
62. </dd>
    
63. </dl>
    
64. <dl class="navService">
    
65. <dt>服务</dt><dd>
    
66. <a target="_blank" href="http://home.hr369.com/home.php?mod=space&do=blog&view=all&order=hot"><span>日志</span></a><a target="_blank" href="http://home.hr369.com/home.php?mod=space&do=album&view=all&order=hot"><span>相册</span></a><a target="_blank" href="http://bbs.hr369.com/userapp.php"><span>应用</span></a><a target="_blank" href="http://blog.hr369.com/"><span>博客</span></a><a target="_blank" href="http://home.hr369.com/radio/default.htm"><span>电台</span></a><a target="_blank" href="http://home.hr369.com/sky/"><span>星空</span></a>
    
67. </dd>
    
68. </dl></div>
    
69. </div>

复制代码

前排占沙发~~~~~~~~~~~~~~~

哈哈，已经用上2.5的测试版本了
http://www.bnrxw.com

沭阳综合论坛，沭阳日子网，www.0527m.com