网站首页   情感论坛   联系我们   留言本 
 
 ※  情感家园企业站 » 网站首页 » 网站教程 » 网站设计
会员登录
账号：
密码：
当前分类  上级分类
推荐文章
热门文章
内容：很不错的二级菜单设计（符合WEB标准）
很不错的二级菜单设计（符合WEB标准）
发布时间：2008-07-31 09:27:20   点击率：4223

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
  5. <title>www.webjx.com</title> 
  6.  
  7. <style type="text/css"> 
  8. <!--   
  9. /*Author:webjx.com*/  
  10. body{  
  11. background-color:white;  
  12. font-size:12px;  
  13. font-family:Arial, Helvetica, sans-serif;  
  14. margin:0px;  
  15. padding:0px;  
  16. color:white;  
  17. }  
  18. ul,li{  
  19. margin:0px;  
  20. padding:0px;  
  21. }  
  22. li{  
  23. display:inline;  
  24. list-style:none;  
  25. list-style-position:outside;  
  26. text-align:center;  
  27. font-weight:bold;  
  28. float:left;  
  29. }  
  30. a:link{  
  31. color:#336601;  
  32. text-decoration:none;  
  33. float:left;  
  34. width:100px;  
  35. padding:3px 5px 0px 5px;  
  36. }  
  37. a:visited{  
  38. color:#336601;  
  39. text-decoration:none;  
  40. float:left;  
  41. padding:3px 5px 0px 5px;  
  42. width:100px;  
  43. }  
  44. a:hover{  
  45. color:white;  
  46. float:left;  
  47. padding:3px 3px 0px 20px;  
  48. width:88px;  
  49. text-decoration:none;  
  50. background-color:#539D26;  
  51. }  
  52. a:active{  
  53. color:white;  
  54. float:left;  
  55. padding:3px 3px 0px 20px;  
  56. width:88px;  
  57. text-decoration:none;  
  58. background-color:#BD06B4;  
  59. }  
  60. #nav{  
  61. width:600px;  
  62. height:30px;  
  63. border-bottom:0px;  
  64. padding:0px 5px;  
  65. position:absolute;  
  66. z-index:1;  
  67. }  
  68. .list{  
  69. line-height:20px;  
  70. text-align:left;  
  71. padding:4px;  
  72. font-weight:normal;  
  73. }  
  74. .menu1{  
  75. width:120px;  
  76. height:auto;  
  77. margin:6px 4px 0px 0px;  
  78. border:1px solid #9CDD75;  
  79. background-color:#F1FBEC;  
  80. color:#336601;  
  81. padding:6px 0px 0px 0px;  
  82. cursor:hand;  
  83. overflow-y:hidden;  
  84. }  
  85. .menu2{  
  86. width:120px;  
  87. height:18px;  
  88. margin:6px 4px 0px 0px;  
  89. background-color:#F5F5F5;  
  90. color:#999999;  
  91. border:1px solid #EEE8DD;  
  92. padding:6px 0px 0px 0px;  
  93. overflow-y:hidden;  
  94. cursor:hand;  
  95. }/*Author:webjx.com*/  
  96. --> 
  97. </style> 
  98. </head> 
  99. <body> 
  100.  
  101. <div id="nav"> 
  102.   <ul> 
  103.   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页    
  104.   <div class="list"> 
  105.     <a href="#">我的WEBJX</a><br /> 
  106.  <a href="#">我的首页</a><br /> 
  107.  <a href="#">我的日志</a><br /> 
  108.     <a href="#">我的日志</a><br /> 
  109.  <a href="#">我的相册</a><br /> 
  110.  <a href="#">我的收藏</a><br /> 
  111.   </div> 
  112.   </li> 
  113.   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子  
  114.   <div class="list"> 
  115.     <a href="#">我的WEBJX</a><br /> 
  116.  <a href="#">我的首页</a><br /> 
  117.  <a href="#">我的日志</a><br /> 
  118.  <a href="#">我的相册</a><br /> 
  119.  <a href="#">我的收藏</a><br /> 
  120.   </div> 
  121.   </li> 
  122.   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信    
  123.   <div class="list"> 
  124.     <a href="#">我的WEBJX</a><br /> 
  125.  <a href="#">我的相册</a><br /> 
  126.  <a href="#">我的收藏</a><br /> 
  127.   </div> 
  128.   </li> 
  129.   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理    
  130.   <div class="list"> 
  131.     <a href="#">我的WEBJX</a><br /> 
  132.  <a href="#">我的首页</a><br /> 
  133.  <a href="#">我的日志</a><br /> 
  134.  <a href="#">我的相册</a><br /> 
  135.  <a href="#">我的收藏</a><br /> 
  136.     <a href="#">我的日志</a><br /> 
  137.  <a href="#">我的相册</a><br /> 
  138.  <a href="#">我的收藏</a><br /> 
  139.   </div> 
  140.   </li> 
  141.   </ul> 
  142. </div> 
  143.  
  144.  
  145. </body> 
  146. </html> 

存放以供参考！