abstrait：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜單案例總結(jié)</title> <link href="https://cdn.bootc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜單案例總結(jié)</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;
}
/* 左側(cè)菜單樣式 */
.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;
}
/* 右側(cè)菜單樣式 */
.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="">手機(jī)逛淘寶</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>聯(lián)系客服<i class="fa fa-angle-down"></i></li>
<li><i class="fa fa-bars"></i>網(wǎng)站導(dǎo)航<i class="fa fa-angle-down"></i></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
<!-- 在這節(jié)課中學(xué)到了清除浮動的作用,及利用hover效果實現(xiàn)下拉菜單的技巧。 -->
</html>
Professeur correcteur：天蓬老師Temps de correction：2019-01-27 17:12:06
Résumé du professeur：做這樣的菜單 , 重點在于定位