<!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>