摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝下拉菜单练习</title> <lin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝下拉菜单练习</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<style>
body{width: 100%; height: 100%; font:12px "Microsoft YaHei", "simsun", "Helvetica Neue", Arial, Helvetica, sans-serif;}
*{margin:0px; padding: 0px; }
ul li{list-style: none; display: list-item; }
.top_content{height:35px; width:1920px; background: #F5F5F5; color: #6c6c6c;}
.top_left{ height: 33px; float: left; margin-left: 350px;}
.top_right{ height: 33px; float: right; margin-right: 350px;}
.top_left_nav,.top_right_nav{list-style: none; line-height: 35px;}
.top_left_nav li{float: left; }
.top_right_nav li{float: left; }
.nav_01{ padding: 0px 5px; text-align: center; }
.pl_login,.nav_01_shop,.nav_01_dh{color: #ff5000; }
.nav_01_favorites{color:#9c9c9c; }
.phone_tb{margin-left: 20px;}
.pl_login{margin-left: 10px;}
.nav_01_d,.nav_shop_class_co,.nav_li_kef,.nav_li_sef,.web_site_nav{display: none;}
.nav_01_w{width: 100px;}
.top_right ul li{border:1px solid transparent;}
.nav_co ul li{clear: both; 28px;line-height: 28px;padding:0 5px;: cursor: pointer;}
.region{width:290px; height: 290px; position: absolute; border: 1px solid #eee; margin-top: -1px; display: none; }
.region ul li{ width:290px; line-height: 28px; padding:0px 5px;cursor: pointer; }
.nav_li_region:hover .nav_01_region{background: #fff; bordert: 1px solid #eee;}
.nav_li_region:hover .region{display: block;}
.nav_01_w:hover{border: 1px solid #eee;background: #fff;}
.nav_01_w:hover .nav_co{position: absolute;border: 1px solid #eee; margin-left: -1px; display: block;padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;}
.nav_shop_class:hover{border: 1px solid #eee;background: #fff;}
.nav_shop_class:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;}
.nav_shop_class:hover{border: 1px solid #eee;background: #fff;}
.nav_shop_class:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;}
.nav_li_k:hover{border: 1px solid #eee;background: #fff;}
.nav_li_k:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;}
.nav_li_se:hover{border: 1px solid #eee;background: #fff;}
.nav_li_se:hover .nav_co{ position: absolute; margin-left: -1px;border: 1px solid #eee; display: block; padding: 0 5px;line-height: 28px;white-space: nowrap;color: #6C6C6C;}
.web_site_nav{position:fixed;; left:350px;z-index: 100001;width:1220px;height:300px;border: 1px solid #eee;}
.web_site_nav div{float: left;width: 305px; }
.site-nav-sitemap-mod{ height:38px; width: 305px; }
.site-nav-sitemap-mod h4{margin-left:20px; line-height: 38px; font-size: 16px;}
.site-nav-sitemap-mod-bd{border-left:1px solid #eee;border-right:1px solid #eee; }
.site-nav-sitemap-mod-bd ul li{float: left; width: 62px; padding: 0 5px; display: inline-block; text-align: center;}
.mod_title_01{color: red;}
.mod_title_02{color: #9fb838;}
.mod_title_03{color: #d75696;}
.mod_title_04{color: #2e9fdb;}
.web_site_nav_w:hover .web_site_nav{display: block;}
.web_site_nav_w:hover{border: 1px solid #eee; background: #fff;}
}
</style>
</head>
<body>
<div>
<div>
<ul>
<li>
<div class="nav_01 nav_01_region">
<span>中国大陆</span>
<i class="fa fa-angle-down"></i>
</div>
<div>
<ul visibility="hidden">
<li>中国</li>
<li>美国</li>
</ul>
</div>
</li>
<li>
<div>
<span>亲，请登陆</span>
<span>免费注册</span>
</div>
</li>
<li>
<div >
<span >手机逛淘宝</span>
</div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<div class="nav_01 ">
<span>我的淘宝</span>
<i class="fa fa-angle-down"></i>
</div>
<div class="nav_01_d nav_co" >
<ul >
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</div>
</li>
<li>
<div>
<i class="fa fa-shopping-cart nav_01_shop fa-1x"></i>
<span>购物车</span>
<i class="fa fa-angle-down"></i>
</div>
</li>
<li>
<div>
<span>收藏夹</span>
<i class="fa fa-angle-down"></i>
</div>
<div class="nav_shop_class_co nav_co" >
<ul >
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</div>
</li>
<li>
<div>
<i class="fa fa-star nav_01_favorites"></i>
<span>商品分类</span>
<i class="fa fa-angle-down"></i>
</div>
</li>
<li>
<div>
<span>卖家中心</span>
<i class="fa fa-angle-down"></i>
</div>
<div class="nav_li_sef nav_co" >
<ul >
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体检中心</li>
<li>问商友</li>
</ul>
</div>
</li>
<li>
<div>
<span>联系客服</span>
<i class="fa fa-angle-down"></i>
</div>
<div class="nav_li_kef nav_co" >
<ul >
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</div>
</li>
<li>
<div>
<i class="fa fa-bars nav_01_dh "></i>
<span>网址导航</span>
<i class="fa fa-angle-down"></i>
</div >
<div>
<div>
<div><h4>主题市场</h4></div>
<div>
<ul>
<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>
</ul>
</div>
</div>
<div>
<div><h4>特色市场</h4></div>
<div>
<ul>
<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>
</ul>
</div>
</div>
<div>
<div><h4>阿里APP</h4></div>
<div>
<ul>
<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>
</ul>
</div>
</div>
<div>
<div><h4>精彩推荐集</h4></div>
<div>
<ul>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
<li>男装</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-04 09:13:10
老师总结：布局还可以简化，完成的不错！下次交作业可以附上作业完成图片！
