进一步完善淘宝的首页导航菜单及子菜单
<!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">联系客服<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>
<!-- 在这节课中学会了使用字体库，并进一步完善了其他几个菜单的下拉菜单。 -->
</html>