用css怎么制作下拉列表 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{
margin:0;
padding:0;}
ul{
list-style-type:none;

}
.ul li{
width:100px;
float:left;
height:30px;
margin-left:10px;
}
.ul .li{
background:#9C6;
}
.ul2{
width:100px;
height:100px;
background:#F69;
display:none;
}
.li:hover .ul2{
display:block;
margin-left:-10px;

}
</style>

<body>
<ul class="ul">
<li class="li"><a href="" class="a">我的订单</a>
<ul class="ul2"> 
<li><a href="">新浪微博</a></li> 
<li><a href="">腾讯微博</a></li> 
<li><a href="">新浪客服微博</a></li> 
</ul> 

</li> 
<li><a href="">我的评价</a></li> 
<li><a href="">我的资产</a></li> 
<li><a href="">我的积分</a></li> 
<li><a href="">我的评价</a></li> 
<li><a href="">账号设置</a></li> 
<li><a href="">账户余额</a></li> 
<li><a href="">代金卷</a></li> 
<li><a href="">消息中心</a></li> 
</ul>
</body>
</html>

 

 

 

主要：将要存放的下拉列表放在一个列标签中：先用display：none 进行隐藏 

　　在hover;中用display：block显示

 

（2）

 

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>利用float制作兼容ie6纯css下来菜单</title> 
<style type="text/css"> 
* { margin:0; padding:0; } 
ul { list-style:none; } 
a:hover {color:#555; } 
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; } 
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; } 
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; } 
.nav a:hover { margin-right:1px; background:#3cf; } 
.nav dd ul { float:left; font-size:0; z-index:888; } 
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; } 
.nav dd li a:hover { margin-right:1px; } 
</style> 
</head> 
<body> 
<dl class="nav"> 
<dd><a href="">首页</a></dd> 
<dd> 
<a href="">关于我们</a> 
<ul> 
<li><a href="">公司简介</a></li> 
<li><a href="">公司文化</a></li> 
<li><a href="">企业荣誉</a></li> 
<li><a href="">联系我们</a></li> 
</ul> 
</dd> 
<dd> 
<a href="">新闻动态</a> 
<ul> 
<li><a href="">国内新闻</a></li> 
<li><a href="">国外新闻</a></li> 
</ul> 
</dd> 
<dd> 
<a href="">产品展示</a> 
<ul> 
<li><a href="">111</a></li> 
<li><a href="">222</a></li> 
</ul> 
</dd> 
</dl> 
</body> 
</html>

 

　　

 

posted @ 2015-05-20 00:21  Animationer  阅读(807)  评论(0)  编辑  收藏  举报