摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>常用菜單導航案例總結</title><link href="https://cdn.bootcss.com/font-awesome/4.7
<!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;
position: relative;
}
.container .menu .right a {
height: 40px;
line-height: 40px;
margin-right: 20px;
}
.container .menu .right .my:hover {
background: #fff;
}
.container .menu .right .my ul li {
float: none;
margin-left: 2px;
border-top: none;
}
.my ul {
display: none;
position: absolute;
margin-left: -2px;
border: 1px solid rgb(240, 237, 237);
border-top: none;
}
.my:hover ul {
display: block;
}
.my ul li:hover {
background: #ccc;
width: 100%;
}
.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">
<a href="" class="my"> 我的淘寶
<ul>
<li>我已買到的寶貝</li>
<li>我的足跡</li>
</ul>
</a>
<a href=""><i class="fa fa-shopping-cart"></i>購物車</a>
<a href="" class="sc my"><i class="fa fa-star"></i>收藏夾<i class="fa fa-angle-down"></i>
<ul>
<li>收藏的寶貝</li>
<li>收藏的店鋪</li>
</ul>
</a>
<a href="">商品分類</li></a>
<a href="" class="my">賣家中心<i class="fa fa-angle-down"></i>
<ul>
<li>免費開店</li>
<li>已賣出的寶貝</li>
<li>出售中的寶貝</li>
<li>賣家服務市場</li>
<li>體驗中心</li>
</ul>
</a>
<a href="" class="my">聯(lián)系客服<i class="fa fa-angle-down"></i>
<ul>
<li>消費者客服</li>
<li>賣家客服</li>
</ul>
</a>
<a href="" class="my" id="nav"><i class="fa fa-bars"></i>網站導航<i class="fa fa-angle-down"></i>
<ul>
<li>余額寶</li>
<li>淘寶香港</li>
</ul>
</a>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
<!-- 在這節(jié)課中學會了使用字體庫，并進一步完善了其他幾個菜單的下拉菜單。 -->
</html>
批改老師：天蓬老師批改時間：2019-01-27 18:15:33
老師總結：代碼沒有縮進, 看起來真累, 下次要注意