下拉菜单作业提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航菜单</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color: #6C6C6C;font-size: 12px;}
li{list-style: none;}
.clear{clear:both;}
.pl8{padding-left: 8px}
.top{width: 100%;height: 40px;line-height: 40px;background: #F5F5F5;border-bottom: 1px solid #eee;}
.menu{width: 1200px;margin: 0 auto;}
.menu a{display: inline-block;padding: 0 4px;position: relative;}
.left{width: 300px;float: left;}
.right{width: 600px;float: right;}
.right ul{display: none;border:1px solid #F5F5F5;position: absolute;left:0px;top:40px;width: 84px;border-top: none}
.right ul li{list-style: none;text-align: left;padding: 0 4px;height:26px;line-height: 26px;margin:6px 0; color:#6C6C6C;}
a.bg:hover ul{display: block}
a.bg ul li:hover{background:#F5F5F5;}
.menu a:hover{color:#FF4400;}
.menu a.bg:hover {background: #fff;}
.orange{color: #FF5000;}
.bigdown{position: absolute;left:-510px;top:40px;width: 602px;border: 1px solid #F5F5F5;display: none;}
.down1{width: 300px;border-right: 1px solid #F5F5F5;overflow: hidden;float: left;}
.down1 p,.down2 p{font-size: 18px;color:#FF4400;padding-left: 10px;}
.down1 li,.down2 li{display: block;float: left;padding:0 10px;}
.down2 p{color:#9FB838;}
.down2{width: 300px;float: left;}
.navs:hover .bigdown{display: block;}
</style>
</head>
<body>
<div>
<div>
<div>
<a href="">中国大陆<span class="pl8 fa fa-angle-down"></span></a>
<a href="">亲,请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div>
<a href="">我的淘宝<span class="pl8 fa fa-angle-down"></span>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""><span class="fa fa-cart-plus orange"></span> 购物车<span class="pl8 fa fa-angle-down"></span></a>
<a href=""><span class="fa fa-star"></span> 收藏夹</a>
<a href="">商品分类</a>
<a href="">卖家中心<span class="pl8 fa fa-angle-down"></span></a>
<a href="">联系客服<span class="pl8 fa fa-angle-down"></span></a>
<a href="" class="bg navs"><span class="fa fa-navicon orange"> </span>网站导航<span class="pl8 fa fa-angle-down"></span>
<div>
<div>
<p>主题市场</p>
<li>女装</li>
<li>男装</li>
<li>内衣</li>
<li>鞋靴</li>
<li>箱包</li>
<li>婴童</li>
<li>家电</li>
<li>数码</li>
<li>手机</li>
<li>美妆</li>
<li>珠宝</li>
<li>眼镜</li>
<li>手表</li>
<li>运动</li>
<li>户外</li>
<li>乐器</li>
<li>游戏</li>
<li>动漫</li>
<li>影视</li>
<li>美食</li>
<li>鲜花</li>
<li>宠物</li>
<li>农资</li>
<li>房产</li>
<li>装修</li>
<li>建材</li>
<li>家居</li>
<li>百货</li>
<li>汽车</li>
<li>二手车</li>
<li>办公</li>
<li>定制</li>
<li>教育</li>
<li>卡券</li>
<li>本地</li>
</div>
<div>
<p>特色市场</p>
<li>爱逛街 </li>
<li>美妆秀 </li>
<li>全球购 </li>
<li>腔调 </li>
<li>淘女郎 </li>
<li>星店 </li>
<li>极有家 </li>
<li>阿里拍卖</li>
<li>淘宝众筹</li>
<li>飞猪 </li>
<li>亲宝贝 </li>
<li>闲鱼 </li>
<li>农资 </li>
<li>天天特卖</li>
<li>Outlets </li>
<li>俪人购 </li>
<li>聚名品 </li>
<li>淘抢购 </li>
<li>全球精选</li>
<li>非常大牌</li>
<li>试用 </li>
<li>量贩团 </li>
<li>阿里翻译</li>
</div>
</div>
</a>
</div>
</div>
</div>
<div></div>
<!--总结：本页面难点在于display和定位的技巧掌握-->
</body>
</html>