用DIV+UL的导航标签

前几天在网上无意中找到的,代码如下:

1. <style type="text/css"><!--
   
2. #topbar a:link,
   
3. #topbar a:visited,
   
4. #topbar a:hover,
   
5. #topbar a:active { color:#369; text-decoration:none; }
   
6. #topbar          { border-bottom:1px solid #FFF; float:left; width:100%; background:url(/topbar/topbar_b.gif) #E5EEF5 repeat-x bottom; }
   
7. #topbar li       { display:inline; line-height:110% !important; line-height:130%; }
   
8. #topbar a        { border-bottom:1px solid #9BB4D1; float:left; font-weight:bold; text-decoration:none; background:url(/topbar/topbar_r.gif) no-repeat right top; }
   
9. #topbar a:hover  { background-position:100% -50px; }
   
10. #topbar span     { padding:6px 12px 4px 12px; float:left; display:block; white-space:nowrap; background:url(/topbar/topbar_l.gif) no-repeat left top; }
    
11. /* $ */
    
12. #topbar span     { float:none; }
    
13. /* $ */
    
14. #topbar a:hover span { background-position:0% -50px; }
    
15. #topbar li#sel a     { border-width:0px; background-position:100% -50px; }
    
16. #topbar li#sel span  { padding-bottom:5px; background-position:0% -50px; }
    
17. #sub_topbar          { padding:0 5px; display:block; background:#FFF; text-align:left; vertical-align:top; }
    
18. #sub_topbar,
    
19. #sub_topbar a:link,
    
20. #sub_topbar a:visited,
    
21. #sub_topbar a:active    { color:#2C4C78; }
    
22. #sub_topbar a           { padding:0 2px; }
    
23. 
    
24. #sub_topbar_atc            { padding:0 0 5px 0; display:block; background:#FFF; }
    
25. #sub_topbar_atc,
    
26. #sub_topbar_atc a:link,
    
27. #sub_topbar_atc a:visited,
    
28. #sub_topbar_atc a:active    { color:#2C4C78; }
    
29. #sub_topbar_atc a           { padding:0 2px; }
    
30. --></style>
    

复制代码

1. 
   
2. <div id="topbar">
   
3.         <ul>
   
4. <li><a href="javascript:history.back(-1)"><span> 返 回 </span></a></li>
   
5. <li><a href="/default.asp" target="_blank"><span> 导 航 </span></a></li>
   
6. <li><a href="/index.php" target="_blank"><span> 论 坛 </span></a></li>
   
7. <li><a href="/woo/" target="_blank"><span> 博 客 </span></a></li>
   
8. <li><a href="/web/" target="_blank"><span> 资 料 </span></a></li>
   
9. <li><a href="http://www.haluo.net" target="_blank"><span> 点 卡 </span></a></li>
   
10.         </ul>
    
11. </div>
    

复制代码

效果如我的论坛
http://www.palclub.cn/index.php
哪位大哥告诉我下怎么加下拉的

比如论坛下面加各个版块的列表

用div+css实现：
http://www.ljxt.com/project/resource/cssplay.mht

非常不错
谢谢楼主

不错，支持！！收藏！！

good......................

谢谢收藏...........

好~!~看