摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href=" https://heerey525.github.io/layui-v2.4.3/layui-v2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href=" https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">
<style>
/* 基本樣式設(shè)置 */
*{margin:0;padding:0;}
.l{float:left;}
.r{float:right;}
.i{margin-left: 5px;}
/* 導(dǎo)航開始 */
.header_1{width:100%;
background-color:#F0EFE1;
border-top:1px solid #E4E2CE;
border-bottom:px solid #E4E2CE;
}
.header{margin:0 auto;
width:1190px;
height:30px;
font-size: 12px;
font-family: "宋體";
color:#A29D85;
line-height:30px;
}
a{text-decoration: none;
color:#A29D85;
margin-left:20px;
}
.left a:hover{color:#ff0000;
text-decoration: underline;}
.right a:hover{color:#ff0000;
}
.right a:hover i{color:#ff6500;font-weight: bold;
}
/* 導(dǎo)航左側(cè)部分 */
.header left{width:500px;
height:inherit;
}
.header .left span{
line-height:30px;
}
/*
導(dǎo)航右側(cè)部分 */
.header .right{width:600px;
height:inherit;
}
.head_right_a{display: inline-block;
position: relative;}
.head_right_a ul{
border:1px solid #ccc;border-top:none;
list-style: none;
width:80px;
display:none;
color:#A29D85;
position: absolute; }
.head_right_a:hover ul{display:block;
text-decoration:none;
}
.head_right_a ul li:hover{background-color:#ccc;}
</style>
<title>下拉菜單的實(shí)現(xiàn)</title>
</head>
<body>
<div class="header_1">
<div class="header">
<!-- 導(dǎo)航欄左側(cè)部分 -->
<div class="left l">
<a href="" >天貓首頁</a></span>
<span>喵，歡迎來天貓</span>
<span><a href="">請登錄</a></span>
<span><a href="">免費(fèi)注冊</a></span>
</div>
<!-- 導(dǎo)航欄右側(cè)部分 -->
<div class="right r">
<a href="" class="head_right_a" >我的淘寶
<i class="layui-icon layui-icon-down"></i>
<ul class="baobei">
<li>已買到的寶貝</li>
<li>我的足跡</li>
</ul>
</a>
<a href=""> <i class="layui-icon layui-icon-cart"></i> 購物車<i class="layui-icon layui-icon-down"></i></a>
<a href="" class="head_right_a">收藏夾
<ul class="shouchang">
<li>收藏的寶貝</li>
<li>收藏的店鋪</li>
</ul>
</a>
<a href="" class="head_right_a">商品分類</a>
<a href="" class="head_right_a">專家中心</a>
<a href="" class="head_right_a">聯(lián)系客服</a>
<a href="" class="head_right_a">網(wǎng)站導(dǎo)航</a>
</div>
</div>
</div>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2019-02-20 17:42:08
老師總結(jié)：css來實(shí)現(xiàn)下拉菜單就比js實(shí)現(xiàn)下拉菜單要簡單的多 但是靈活性并沒有js實(shí)現(xiàn)下拉菜單好 后面會(huì)講到j(luò)s實(shí)現(xiàn)下拉菜單