CSS下拉菜单,下拉菜单代码,下拉菜单

这里分享一个CSS下拉菜单代码，先看下效果图。

下面是HTML代码：

我的首页

我爱CSS

我的首页

我的日志

我的日志

我的相册

我的收藏

社区圈子

我爱CSS

我的首页

我的日志

我的相册

我的收藏

我的短信

我爱CSS

我的相册

我的收藏

账户管理

我爱CSS

我的首页

我的日志

我的相册

我的收藏

我的日志

我的相册

我的收藏

留意下面的代码：

class="menu2"

onMouseOver="this.className='menu1'"

onMouseOut="this.className='menu2'"

下面是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:3px5px0px5px;

}

a:visited{

color:#336601;

text-decoration:none;

float:left;

padding:3px5px0px5px;

width:100px;

}

a:hover{

color:white;

float:left;

padding:3px3px0px20px;

width:88px;

text-decoration:none;

background-color:#539D26;

}

a:active{

color:white;

float:left;

padding:3px3px0px20px;

width:88px;

text-decoration:none;

background-color:#BD06B4;

}

#nav{

width:600px;

height:30px;

border-bottom:0px;

padding:0px5px;

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:6px4px0px0px;

border:1pxsolid#9CDD75;

background-color:#F1FBEC;

color:#336601;

padding:6px0px0px0px;

cursor:hand;

overflow-y:hidden;

filter:Alpha(opacity=70);

-moz-opacity:0.7;

}

.menu2{

width:120px;

height:18px;

margin:6px4px0px0px;

background-color:#F5F5F5;

color:#999999;

border:1pxsolid#EEE8DD;

padding:6px0px0px0px;

overflow-y:hidden;

cursor:hand;

}

有用  |  无用 取消

猜你喜欢