abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单案例总结</title> <link href="https://cdn.bootc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单案例总结</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
a {
text-decoration: none;
padding: 0;
float: left;
}
ul li {
list-style: none;
margin-left: 5px;
margin-right: 18px;
line-height: 40px;
}
.cont {
width: 100%;
}
.container {
width: 1200px;
margin: 0 auto;
font-size: 14px;
}
.cont,
.container .menu {
background: #F5F5F5;
height: 40px;
}
.sub {
float: none;
border: 1px solid rgb(240, 237, 237);
border-top: none;
}
/* 左侧菜单样式 */
.container .menu .left ul {
display: none;
}
.container .menu .left i {
margin-left: 5px;
}
.container .menu .left a {
display: inline-block;
line-height: 40px;
margin-right: 20px;
position: relative;
}
.container .menu .left a:hover {
background: #fff;
/* border:1px solid #ccc; */
border-bottom: none;
}
.container .menu .left a:hover ul {
display: block;
position: absolute;
width: 100px;
}
.container .menu .left a ul li:hover {
margin-left: 0;
padding-left: 5px;
width: 95px;
background: #ccc;
}
/* 右侧菜单样式 */
.container .menu .right {
float: right;
}
.container .menu .right ul li {
float: left;
}
.fa-shopping-cart {
margin-right: 5px;
color: #FF6A04;
}
.fa-star {
margin-right: 5px;
}
.sc:hover {
color: #FF6A04;
}
.fa-bars {
margin-right: 5px;
color: #FF6A04;
}
.right .fa-angle-down {
margin-left: 5px;
}
</style>
</head>
<body>
<div class="cont">
<div class="container">
<div class="menu">
<div class="left">
<a href="">中国大陆<i class="fa fa-angle-down"></i>
<ul class="sub">
<li>全球</li>
<li>香港</li>
<li>澳大利亚</li>
</ul>
</a>
<a href="" style="color:#F23100;">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="right">
<ul>
<li>我的淘宝</li>
<li><i class="fa fa-shopping-cart"></i>购物车</li>
<li><a href="" class="sc"><i class="fa fa-star"></i>收藏夹<i class="fa fa-angle-down"></i></a></li>
<li>商品分类</li>
<li>卖家中心<i class="fa fa-angle-down"></i></li>
<li>联系客服<i class="fa fa-angle-down"></i></li>
<li><i class="fa fa-bars"></i>网站导航<i class="fa fa-angle-down"></i></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
<!-- 在这节课中学到了清除浮动的作用,及利用hover效果实现下拉菜单的技巧。 -->
</html>
Correcting teacher：天蓬老师Correction time：2019-01-27 17:12:06
Teacher's summary：做这样的菜单 , 重点在于定位