摘要：<div class="middle"> <div class="content"> &
<div class="middle"> <div class="content"> <div class="menu"> <div class="logo"><i class="fa fa-bars"></i>商品分类</div> <ul class="menus"> <li> <a href="#"><i class="fa fa-hand-o-right"></i>女装/内衣</a> <div class="menu_content"> <div class="menu_left"> <p> <strong>当季流行</strong><span class="fa fa-angle-right"></span> </p> <p class="hr"> <a href="#">夏季新品</a> <a href="#">冬季新品</a> <a href="#">秋季新品</a> <a href="#">春季新品</a> <a href="#">夏季新品</a> <a href="#">冬季新品</a> <a href="#">秋季新品</a> <a href="#">春季新品</a> <a href="#">秋季新品</a><br> <a href="#">夏季新品</a> <a href="#">冬季新品</a> <a href="#">秋季新品</a> <a href="#">春季新品</a> </p>
*{margin: 0;padding: 0}
ul{list-style: none;}
a{text-decoration: none;color:#999;}
body{font-size: 12px;}
.clear{clear:both;}
.top{background:#f2f2f2;height:35px;margin-bottom: 80px;}
.header{height: 35px;line-height: 35px;width: 1200px;margin: 0 auto;}
.left{width: 300px; float: left;}
.left a{margin-right: 12px;}
/*right*/
.right{float: right;}
.right li{float: left;margin-right: 12px;position: relative;}
.right li i{color:red;margin-right: 3px;}
.header a:hover{color:red;}
.right li>div{box-shadow: 2px 1px 10px #ccc;background: #fff;text-align: center;display: none}
.right li:hover div{display: block;}
.right .myShow{width:100px;position: absolute;left:0px;top:35px;line-height: 20px;padding: 8px 0;}
.right .mybaby{width:90px;position: absolute;left:0px;top:35px;line-height: 25px;}
/*网站导航*/
.website{width:1200px;height: 110px;position: absolute;right:0px;top:35px;padding: 25px 0;}
.website a{color:#333;}
.webleft{width: 420px;height: 110px;padding-left: 20px;float:left;border-right:1px solid #eee;}
.webleft a:hover{color: #ff6700;}
.webleft h2{color: #ff6700;text-align: left;font-weight: 300;margin-top: -10px;}
.webleft ul li {width: 84px;padding: 7px 0;line-height: 16px;margin-right: 0;text-align: left;}
.webmid{width: 455px;height: 110px;padding-left: 40px;float:left;border-right:1px solid #eee;}
.webmid a:hover{color: #2263D4;}
.webmid h2{color: #2263D4;text-align: left;font-weight: 300;margin-top: -10px;}
.webmid ul li {width: 84px;padding: 7px 0;line-height: 16px;margin-right: 0;text-align: left;}
.webright{width: 196px;height: 110px;padding-left: 40px;float:left;}
.webright a:hover{color: #2263D4;}
.webright h2{color: #2263D4;text-align: left;font-weight: 300;margin-top: -10px;}
.webright ul li {width: 95px;padding: 7px 0;line-height: 16px;margin-right: 0;text-align: left}
/*左边大导航*/
.middle{width: 100%;height: 500px;background: url(../images/1.jpg) center no-repeat;background: #E8E8E8;}
.middle .content{margin: 0 auto; width: 1200px;height:500px;background: url(../images/1.jpg) center no-repeat;}
.middle .menu {width: 200px; height: 550px;background: rgba(0,0,0,0.4);position: relative;top: -50px;}
.middle .menu .logo{background: #FF0036;width: 180px;height: 30px;line-height: 30px;color: #fff;font-size: 16px;padding: 10px}
.middle .menu .logo i{margin-right: 10px;}
.middle .menus{position: relative;}
.middle .menus li{height:31px;line-height: 31px;padding: 0 10px;}
.middle .menus li:hover{background: #fff;}
.middle .menus li:hover>a{color: #FF0036;}
.middle .menus li:hover i{color: #FF0036;}
.middle .menus li>a {color:#fff;font-size: 14px;}
.middle .menus li a i {margin: 0 10px}
.menu_content {width: 820px;height:500px;background: #f2f2f2;position: absolute;left:200px;top:0;display: none;}
.middle .menus li:hover .menu_content{display: block;}
.menu_content .menu_left{width: 620px;height:500px;float: left; background: #fff;}
.menu_left p{float:left;margin: 10px 0px 0px 20px;}
.menu_left p a{margin-right:8px;float:left;color:#666;}
.menu_left p span{margin: 0 10px 0px 5px;}
.menu_left p.hr{border-bottom:1px dashed #ccc;}
.aspecial{color:#e54077;}
.menu_right{width: 180px;height: 480px;float: right;margin: 9px 10px;line-height: 15px}
.menu_right a img{height: 52px;width: 87px;}
太长了 放不下了...就放个图吧 ...
批改老师：韦小宝批改时间：2018-11-15 16:00:26
老师总结：厉害啊！仿的没毛病！代码写的也很规范！继续加油吧！！！
