一个简单的导航类弹出菜单!

给需要的人, 这只是一个简单的构架, 请使用者自行美化!!



CSS部分

1. <style>
   
2. .topmenu { margin:0px auto; width:420px; height:35px; border-left:1px #dddddd solid; }
   
3. .topmenu li { float:left; width:104px; height:35px; border-right:1px #dddddd solid; text-align:center; color:#575757; font-size:14px; line-height:35px; *line-height:37px; font-weight:bold; cursor:pointer; overflow:hidden;}
   
4. .topmenu a { color:#575757; }
   
5. .floatmenu { width:104px; margin:-26px 0px 0px -23px; *margin:-37px 0px 0px -19px; padding:0px 0px 4px; border:1px #dddddd solid; border-top:none; background:#f1f1f1; overflow:hidden; }
   
6. .floatmenu li { float:left; width:104px; height:24px; font-size:13px; line-height:24px; *line-height:26px; text-align:center; overflow:hidden; }
   
7. .floatmenu a { display:block; width:104px; line-height:24px; *line-height:26px; color:#575757; }
   
8. .floatmenu a:hover { background:#0099FF; text-decoration:none; color:#ffffff; }
   
9. .floatmenu li.mtop { height:35px; text-align:center; color:#222222; font-size:14px; line-height:35px; *line-height:37px; font-weight:bold; cursor:pointer; }
   
10. </style>

复制代码

HTML部分  onmouseover 如改成 onclick (点击后弹出菜单)

1. <div style=" height:35px; width:960px; margin:0px auto; background:#f3f3f3;"> <!--自己修改-->
   
2. <ul class="topmenu">
   
3. <li><a href="javascript:;" id="menu1" onmouseover="showMenu({'ctrlid':this.id})">快速通道</a></li>
   
4. <li><a href="javascript:;" id="menu2" onmouseover="showMenu({'ctrlid':this.id})">特色功能</a></li>
   
5. <li><a href="javascript:;" id="menu3" onmouseover="showMenu({'ctrlid':this.id})">快速发帖</a></li>
   
6. <li><a id="myprompt" href="notice.php" <!--{if $prompt}-->class="new" onmouseover="showMenu({'ctrlid':this.id})"<!--{/if}-->>社区秘书</a></li>
   
7. </ul>
   
8. </div>
   
9. <ul class="floatmenu" id="menu1_menu" style="display: none;">
   
10. <li class="mtop">快速通道</li>
    
11. <li><a href="http://www.ge6.net">格调社区</a></li>
    
12. <li><a href="http://www.ge6.net">格调社区</a></li>  
    
13. <li><a href="http://www.ge6.net">格调社区</a></li>
    
14. <li><a href="http://www.ge6.net">格调社区</a></li>
    
15. <li><a href="http://www.ge6.net">格调社区</a></li>
    
16. <li><a href="http://www.ge6.net">格调社区</a></li>
    
17. <li><a href="http://www.ge6.net">格调社区</a></li>
    
18. </ul>
    
19. <ul class="floatmenu" id="menu2_menu" style="display: none;">
    
20. <li class="mtop">特色功能</li>
    
21. <li><a href="http://www.ge6.net">格调社区</a></li>
    
22. <li><a href="http://www.ge6.net">格调社区</a></li>
    
23. <li><a href="http://www.ge6.net">格调社区</a></li>
    
24. <li><a href="http://www.ge6.net">格调社区</a></li>
    
25. <li><a href="http://www.ge6.net">格调社区</a></li>
    
26. <li><a href="http://www.ge6.net">格调社区</a></li>
    
27. <li><a href="http://www.ge6.net">格调社区</a></li>
    
28. </ul>
    
29. <ul class="floatmenu" id="menu3_menu" style="display: none;">
    
30. <li class="mtop">快速发帖</li>
    
31. <li><a href="http://www.ge6.net">格调社区</a></li>
    
32. <li><a href="http://www.ge6.net">格调社区</a></li>
    
33. <li><a href="http://www.ge6.net">格调社区</a></li>
    
34. <li><a href="http://www.ge6.net">格调社区</a></li>
    
35. <li><a href="http://www.ge6.net">格调社区</a></li>
    
36. <li><a href="http://www.ge6.net">格调社区</a></li>
    
37. <li><a href="http://www.ge6.net">格调社区</a></li>
    
38. </ul>        

复制代码