摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝导航</title> <link rel="stylesheet" type="text/css"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝导航</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <div> <div> <div> <a href="">中国大陆 <i class="fa fa-angle-down"></i></a> <a href="" style="color:#FF5000;">亲,请登录</a> <a href="">免费注册</a> <a href="">手机逛淘宝</a> </div> <div> <a href="">我的淘宝<i class="fa fa-angle-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href="" ><span class="fa fa-shopping-cart" style="color:#FF5000;"></span>购物车</a> <a href=""><span class="fa fa-star"></span>收藏夹<i class="fa fa-angle-down"></i> <ul> <li>收藏的宝贝</li> <li>收藏的店铺</li> </ul> </a> <a href="">商品分类</a> <a href="">卖家中心<i class="fa fa-angle-down"></i> <ul> <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>卖家服务市场</li> <li>卖家培训中心</li> <li>体检中心</li> <li>问商友</li> </ul> </a> <a href="">联系客服<i class="fa fa-angle-down"></i> <ul> <li>消费者客服</li> <li>卖家客服</li> </ul> </a> <a href="" class="header_b"><span class="fa fa-align-justify" style="color:#FF5000;"></span>网站导航<i class="fa fa-angle-down"></i> <div class="div"> <div class="div1"> <ul class="list"> <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 class="div2"> 22222 </div> </div> </a> </div> </div> </div> </body> </html>
CSS
*{margin:0px;padding:0px;}
a{text-decoration: none; color: #6c6c6c;font-size: 13px;}
li{list-style: none;}
.clear{clear: both;}
.header{width: 100%;background: #F5F5F5;}
.header_content{width: 1200px;margin:0 auto auto; line-height: 40px;}
.header_left{height: 40px;float: left;}
.header_left a{margin-right: 5px;}
.header_content a:hover{color:#FF5000; }
.header_right{width: 600px;height: 40px;float: right;}
.header_a{display: inline-block;height: 40px;width: 90px;text-align: center;position: relative;}
.header_a:hover{background-color:#fff; }
.header_a ul{border: 1px solid #F5F5F5;display: none;border-top:none;}
.header_a:hover ul{display: block;position: absolute;width: 100px;}
.header_a ul li:hover{background: #F5F5F5;}
.header_a ul li {color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0px 3px;margin:5px 0px; }
/*以下新加*/
.header_b{display: inline-block;height: 40px;width: 90px;text-align: center;position: relative;}
.header_b:hover{background-color:#fff; }
.header_b div{border: 1px solid #eee;border-top:none;height: 400px; display: none;right: 0;background: #fff;}
.header_b:hover div{display: block;position: absolute;}
.header_b ul li:hover{background: #539ce9;color: white;}
.header_b ul li {color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0px 3px;margin:5px 0px; }
.div{width: 1188px;}
.div .div1{float:left;background: pink;}
.div .div2{float:left;width:205px;background: green;}
.list{width:295px;overflow:hidden;zoom:1;list-style: none;}
.list li{float:left;width:130px;padding:5px;}效果图
不好意思老师，研究了2-3个小时，查了网上资料，然后div2 （绿色背景的）总是要挡住div1，帮看下是那里逻辑错了。如果不放在下来里面，这2个div是可以并排的，感觉是错在定位这块，明天我再加强看定位。
我尝试使用了块元素转行内元素display: inline;也不可以并排，失效的原因可能是上面.header_a{display: inline-block;}父级a标签这里转成过行内块元素。
总结：这个下来案例，运用的知识点还比较多的。相对定位和绝对定位的配合使用，伪属性:hover 的使用移动上去后显示。下拉菜单隐藏显示border-top:none; 还有最关键的一点就是代码的复用性，比如下拉列表的css样式，做好一次，每个地方可以使用。
批改老师：天蓬老师批改时间：2018-12-13 08:57:53
老师总结：这类下拉菜单 , 在很大型网站有都有应用, 一定要掌握哟
