盛天设计网

搜索

热门标签

返回首页
当前位置: 主页 > CSS教程 >

没有JS只用CSS制作的网页下拉菜单

时间:2010-01-17 17:23来源:未知 作者:admin 点击:次
这款下拉菜单栏的实现非常简单，没有用到复杂的JS代码，完全依靠css代码来实现的，只需进行简单的修改变换就可以了，以下是代码实例： html代码： div id=nav ul li class=menu2 onMouseOver

这款下拉菜单栏的实现非常简单，没有用到复杂的JS代码，完全依靠css代码来实现的，只需进行简单的修改变换就可以了，以下是代码实例：

 

html代码：

<div id="nav">
    <ul>
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Home Page    
    <div class="list">
        <a href="http://www.webjx.com/">网页教学网</a><br />
        <a href="#">我的首页</a><br _fcksavedurl=""#">我的首页</a><br" />
        <a href="#">我的日志</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
    </div>
    </li>
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Connection 
    <div class="list">
        <a href="http://www.webjx.com/">网页教学网</a><br />
        <a href="#">我的首页</a><br _fcksavedurl=""#">我的首页</a><br" />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
    </div>
    </li>
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">My Files    
    <div class="list">
        <a href="http://www.webjx.com/">网页教学网</a><br />
        <a href="#">我的相册</a><br _fcksavedurl=""#">我的相册</a><br" />
        <a href="#">我的收藏</a><br />
    </div>
    </li>
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Management    
    <div class="list">
        <a href="http://www.webjx.com/">网页教学网</a><br />
        <a href="#">我的首页</a><br _fcksavedurl=""#">我的首页</a><br" />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
    </div>
    </li>
    </ul>
</div>

 

下面是css代码：

body{
    background-color:white;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    margin:0px;
    padding:0px;
    color:white;
}
ul,li{
    margin:0px;
    padding:0px;
}
li{
    display:inline;
    list-style:none;
    list-style-position:outside;
    text-align:center;
    font-weight:bold;
    float:left;
}
a:link{
    color:#336601;
    text-decoration:none;
    float:left;
    width:100px;
    padding:3px 5px 0px 5px;
}
a:visited{
    color:#336601;
    text-decoration:none;
    float:left;
    padding:3px 5px 0px 5px;
    width:100px;
}
a:hover{
    color:white;
    float:left;
    padding:3px 3px 0px 20px;
    width:88px;
    text-decoration:none;
    background-color:#539D26;
}
a:active{
    color:white;
    float:left;
    padding:3px 3px 0px 20px;
    width:88px;
    text-decoration:none;
    background-color:#BD06B4;
}
#nav{
    width:600px;
    height:30px;
    border-bottom:0px;
    padding:0px 5px;
    position:absolute;
    z-index:1;
    left: 198px;
    top: 25px;
}
.list{
    line-height:20px;
    text-align:left;
    padding:4px;
    font-weight:normal;
}
.menu1{
    width:120px;
    height:auto;
    margin:6px 4px 0px 0px;
    border:1px solid #9CDD75;
    background-color:#F1FBEC;
    color:#336601;
    padding:6px 0px 0px 0px;
    cursor:hand;
    overflow-y:hidden;
    filter:Alpha(opacity=70);
    -moz-opacity:0.7;
}
.menu2{
    width:120px;
    height:18px;
    margin:6px 4px 0px 0px;
    background-color:#F5F5F5;
    color:#999999;
    border:1px solid #EEE8DD;
    padding:6px 0px 0px 0px;
    overflow-y:hidden;
    cursor:hand;
}

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>用css实现网页下拉菜单</title>  
  6. </head>  
  7. <style type="text/css">  
  8. body{  
  9. background-color:black;  
  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. <body>  
  100. <div id="nav">  
  101. <ul>  
  102. <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Home Page  
  103. <div class="list">  
  104. <a href="http://www.webjx.com/">网页教学网</a><br />  
  105. <a href="#">我的首页</a><br />  
  106. <a href="#">我的日志</a><br />  
  107. <a href="#">我的日志</a><br />  
  108. <a href="#">我的相册</a><br />  
  109. <a href="#">我的收藏</a><br />  
  110. </div>  
  111. </li>  
  112. <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Connection  
  113. <div class="list">  
  114. <a href="http://www.webjx.com/">网页教学网</a><br />  
  115. <a href="#">我的首页</a><br />  
  116. <a href="#">我的日志</a><br />  
  117. <a href="#">我的相册</a><br />  
  118. <a href="#">我的收藏</a><br />  
  119. </div>  
  120. </li>  
  121. <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">My Files  
  122. <div class="list">  
  123. <a href="http://www.webjx.com/">网页教学网</a><br />  
  124. <a href="#">我的相册</a><br />  
  125. <a href="#">我的收藏</a><br />  
  126. </div>  
  127. </li>  
  128. <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Management  
  129. <div class="list">  
  130. <a href="http://www.webjx.com/">网页教学网</a><br />  
  131. <a href="#">我的首页</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. </div>  
  139. </li>  
  140. </ul>  
  141. </div>  
  142. </body>  
  143. </html> 

 

(责任编辑：admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片
最新评论 进入详细评论页>>
推荐赞助商
推荐内容
热点内容

we sell Cheap

塞班论坛 7k7k单人小游戏 便宜虚拟主机 ucweb下载 情侣 大杂烩 济南厂房网 小说阅读 健康医疗网 瀚翔软件站 常用软件站 平民软件站 射击小游戏 ucweb官网 ucweb下载 ucweb手机浏览器 ucweb浏览器下载 ucweb浏览器官网 手机ucweb下载 教育科学网 ucweb下载 ucweb官网下载 ucweb浏览器下载 手机ucweb下载 flash小游戏 奥特曼小游戏 4399小游戏 4399在线小游戏 7k7k单人小游戏 2144小游戏 换装小游戏 做饭小游戏 化妆小游戏 儿童小游戏 休闲小游戏 装扮小游戏 海绵宝宝小游戏 ucweb7.0

Powered by DedeCMSV55_UTF8 © 2004-2009 DesDev Inc.

Copyright © 2002-2009 盛天设计网 版权所有
沪ICP备05042945号