标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/yaobolove/p/4516042.html
