精美纯Css鼠标经过下拉菜单
代码：
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br/>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312"><br/><head><br/><title>精美纯Css鼠标经过下拉菜单</title><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br/><style><br/>body{<br/>background-color:white;<br/>font-size:12px;<br/>font-family:Arial, Helvetica, sans-serif;<br/>margin:0px;<br/>padding:0px;<br/>color:white;<br/>}<br/>ul,li{<br/>margin:0px;<br/>padding:0px;<br/>}<br/>li{<br/>display:inline;<br/>list-style:none;<br/>list-style-position:outside;<br/>text-align:center;<br/>font-weight:bold;<br/>float:left;<br/>}<br/>a:link{<br/>color:#336601;<br/>text-decoration:none;<br/>float:left;<br/>width:100px;<br/>padding:3px 5px 0px 5px;<br/>}<br/>a:visited{<br/>color:#336601;<br/>text-decoration:none;<br/>float:left;<br/>padding:3px 5px 0px 5px;<br/>width:100px;<br/>}<br/>a:hover{<br/>color:white;<br/>float:left;<br/>padding:3px 3px 0px 20px;<br/>width:88px;<br/>text-decoration:none;<br/>background-color:#539D26;<br/>}<br/>a:active{<br/>color:white;<br/>float:left;<br/>padding:3px 3px 0px 20px;<br/>width:88px;<br/>text-decoration:none;<br/>background-color:#539D26;<br/>}<br/>#nav{<br/> width:600px;<br/> height:30px;<br/> border-bottom:0px;<br/> padding:0px 5px;<br/> position:absolute;<br/> z-index:1;<br/> left: 198px;<br/> top: 25px;<br/>}<br/>.list{<br/>line-height:20px;<br/>text-align:left;<br/>padding:4px;<br/>font-weight:normal;<br/>}<br/>.menu1{<br/>width:120px;<br/>height:auto;<br/>margin:6px 4px 0px 0px;<br/>border:1px solid #9CDD75;<br/>background-color:#F1FBEC;<br/>color:#336601;<br/>padding:6px 0px 0px 0px;<br/>cursor:hand;<br/>overflow-y:hidden;<br/>filter:Alpha(opacity=70);<br/>-moz-opacity:0.7;<br/>}<br/>.menu2{<br/>width:120px;<br/>height:18px;<br/>margin:6px 4px 0px 0px;<br/>background-color:#F5F5F5;<br/>color:#999999;<br/>border:1px solid #EEE8DD;<br/>padding:6px 0px 0px 0px;<br/>overflow-y:hidden;<br/>cursor:hand;<br/>}<br/></style><br/></head><br/><body><br/><div id="nav"><br/> <ul><br/> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'" >JS特效学院 <br/> <div class="list"><br/> <a href="http://www.xunzou.com/">我的Png</a><br /><br/> <a href="http://www.xunzou.com/">我的Gif</a><br /><br/> <a href="http://www.xunzou.com/">我的酷站</a><br /><br/> <a href="http://www.xunzou.com/">我的日志</a><br /><br/> <a href="http://www.xunzou.com/">我的相册</a><br /><br/> <a href="http://www.xunzou.com/">我的收藏</a><br /><br/> </div><br/> </li><br/> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子<br/> <div class="list"><br/> <a href="http://www.xunzou.com/">我的CHINAY</a><br /><br/> <a href="http://www.xunzou.com/">我的首页</a><br /><br/> <a href="http://www.xunzou.com/">我的日志</a><br /><br/> <a href="http://www.xunzou.com/">我的相册</a><br /><br/> <a href="http://www.xunzou.com/">我的收藏</a><br /><br/> </div><br/> </li><br/> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信 <br/> <div class="list"><br/> <a href="http://www.xunzou.com/">我的CHINAY</a><br /><br/> <a href="http://www.xunzou.com/">我的相册</a><br /><br/> <a href="http://www.xunzou.com/">我的收藏</a><br /><br/> </div><br/> </li><br/> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理 <br/> <div class="list"><br/> <a href="http://www.xunzou.com/">我的CHINAY</a><br /><br/> <a href="http://www.xunzou.com/">我的首页</a><br /><br/> <a href="http://www.xunzou.com/">我的日志</a><br /><br/> <a href="http://www.xunzou.com/">我的相册</a><br /><br/> <a href="http://www.xunzou.com/">我的收藏</a><br /><br/> <a href="http://www.xunzou.com/">我的日志</a><br /><br/> <a href="http://www.xunzou.com/">我的相册</a><br /><br/> <a href="http://www.xunzou.com/">我的收藏</a><br /><br/> </div><br/> </li><br/> </ul><br/></div><br/></body><br/></html><br/>
0 条留言
我要留言