CSS纯CSS前端网页特效下拉菜单源码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>CSS菜单－－下拉菜单</title>
  6. <style>
  7. /*Author:5key.net*/
  8. body{
  9. background-color:white;
  10. font-size:12px;
  11. font-family:Arial, Helvetica, sans-serif;
  12. margin:0px;
  13. padding:0px;
  14. color:white;
  15. }
  16. ul,li{
  17. margin:0px;
  18. padding:0px;
  19. }
  20. li{
  21. display:inline;
  22. list-style:none;
  23. list-style-position:outside;
  24. text-align:center;
  25. font-weight:bold;
  26. float:left;
  27. }
  28. a:link{
  29. color:#336601;
  30. text-decoration:none;
  31. float:left;
  32. width:100px;
  33. padding:3px 5px 0px 5px;
  34. }
  35. a:visited{
  36. color:#336601;
  37. text-decoration:none;
  38. float:left;
  39. padding:3px 5px 0px 5px;
  40. width:100px;
  41. }
  42. a:hover{
  43. color:white;
  44. float:left;
  45. padding:3px 3px 0px 20px;
  46. width:88px;
  47. text-decoration:none;
  48. background-color:#539D26;
  49. }
  50. a:active{
  51. color:white;
  52. float:left;
  53. padding:3px 3px 0px 20px;
  54. width:88px;
  55. text-decoration:none;
  56. background-color:#BD06B4;
  57. }
  58. #nav{
  59.         width:600px;
  60.         height:30px;
  61.         border-bottom:0px;
  62.         padding:0px 5px;
  63.         position:absolute;
  64.         z-index:1;
  65.         left: 198px;
  66.         top: 25px;
  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. filter:Alpha(opacity=70);
  85. -moz-opacity:0.7;
  86. }
  87. .menu2{
  88. width:120px;
  89. height:18px;
  90. margin:6px 4px 0px 0px;
  91. background-color:#F5F5F5;
  92. color:#999999;
  93. border:1px solid #EEE8DD;
  94. padding:6px 0px 0px 0px;
  95. overflow-y:hidden;
  96. cursor:hand;
  97. }
  98. </style>
  99. </head>

  101. <body>
  102. <div id="nav">
  103.         <ul>
  104.         <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页       
  105.         <div class="list">
  106.                 <a href="#">我的CHINAY</a>

  108.         <a href="#">我的首页</a>

  110.         <a href="#">我的日志</a>

  112.                 <a href="#">我的日志</a>

  114.         <a href="#">我的相册</a>

  116.         <a href="#">我的收藏</a>

  118.         </div>
  119.         </li>
  120.         <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
  121.         <div class="list">
  122.                 <a href="#">我的CHINAY</a>

  124.         <a href="#">我的首页</a>

  126.         <a href="#">我的日志</a>

  128.         <a href="#">我的相册</a>

  130.         <a href="#">我的收藏</a>

  132.         </div>
  133.         </li>
  134.         <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信       
  135.         <div class="list">
  136.                 <a href="#">我的CHINAY</a>

  138.         <a href="#">我的相册</a>

  140.         <a href="#">我的收藏</a>

  142.         </div>
  143.         </li>
  144.         <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理       
  145.         <div class="list">
  146.                 <a href="#">我的CHINAY</a>

  148.         <a href="#">我的首页</a>

  150.         <a href="#">我的日志</a>

  152.         <a href="#">我的相册</a>

  154.         <a href="#">我的收藏</a>

  156.                 <a href="#">我的日志</a>

  158.         <a href="#">我的相册</a>

  160.         <a href="#">我的收藏</a>

  162.         </div>
  163.         </li>
  164.         </ul>
  165. </div>
  166. </body>
  167. </html>
CSS纯CSS前端网页特效下拉菜单源码以上就是鬼谷源码站提供全部内容了。