代码简介:
配色很舒服的纯CSS二级下拉菜单,没有用到JS,全部是CSS代码,拷贝即可使用,你可以根据自己的需要升级改造,还是很值得借鉴的。
代码内容:
<!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>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS绿色二级下拉菜单代码_网页代码站(www.webdm.cn)</title> <style> 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; 100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; 100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; 88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; 88px; text-decoration:none; background-color:#BD06B4; } #nav{ 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{ 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{ 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; } </style> </head> <body> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">网站 首页<div class="list"> <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'">社区 圈子 <div class="list"> <a href="/jscss//">.NET圈子</a><br /> <a href="#">PHP圈子</a><br /> <a href="#">ASP圈子</a><br /> <a href="#">JAVA圈子</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">论坛 导航 <div class="list"> <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'">账户 管理 <div class="list"> <a href="#">我的帐号</a><br /> <a href="#">余额转移</a><br /> <a href="#">我的地盘</a><br /> </div> </li> </ul> </div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码 !</p>
代码来自:http://www.webdm.cn/webcode/b1784f8f-5425-4f0c-8d10-0f16bd0ae96a.html