CSS:CSS基础之十六
效果图如下：
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 332.25pt; HEIGHT: 110.25pt" type="#_x0000_t75"><imagedata o:title="CSSMenu2Result" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.jpg"></imagedata></shape>
代码如下:(主要部分)
第一步：
CSSMenu2.htm
<title>CSS菜单－－下拉菜单</title>
<link href="CSSMenu2.css" rel="stylesheet" type="text/css" />
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页
<div class="list">
<a href="#">我的CHINAY</a><br />
<a href="#">我的首页</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'">社区圈子
<div class="list">
<a href="#">我的CHINAY</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'">我的短信
<div class="list">
<a href="#">我的CHINAY</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="#">我的CHINAY</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 />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div>
</body>
第二步：
CSSMenu2.css
*{margin:0px;padding:0px;}
body{
background-color:white;
font-size:12px;
font-family:"宋体";
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
left: 198px;
top: 25px;
z-index:1;
}
li{
text-align:center;
font-weight:bold;
float:left;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
a:link{
color:#336601;
text-decoration:none;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
.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;
}
.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、 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">/*--与JS配合是关键 --*/
2、 line-height:20px; height:auto; height:18px;
/*--要对应起来 --*/
3、overflow-y:hidden; /*--实现隐藏菜单的关键 --*/
意外收获:
background-color:#F5F5F5;的作用不仅仅是背景色,它还能使菜单名和菜单项的显示连贯起来.