サマリー：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>導航條</title>
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type='text/css'>
*{margin:0px;padding:0px;}
.header{width:100%;height: 40px;background-color: #f5f5f5;}
.content{width:1200px;height:40px;background-color: #f5f5f5;margin:auto;line-height: 40px;font-size:13px;}
.right1 {font-family: 宋體;float:right;color:#646464;height:30px;}
li {list-style-type: none;float:left;text-align: center;}
a {width:68px;color:#646464;text-decoration: none;padding:0px 1px;/*position: relative;*/}
.lili{text-align: left;width:80px;height:30px;border:1px solid #f5f5f5;border-top:none;padding:0px 3px;display:none;/*position: absolute;*/}
a:hover {color:red;}
ul {text-align: left;width:200px;height:80px;border:1px solid #f5f5f5;padding:0px 3px;display:none;color:#646464;}
.items0 {width:40px;}
.items:hover .lili{display:block;} /****items后面不可以有空格****/
.lili:hover{background:#757575;}
.left1:hover ul{display:block;}
ul li:hover {color:red;}
</style>
</head>
<body>
<div class="header">
<div class="content">
<div class="left1" style="float:left;">送至：北京<i class="fa fa-angle-down"></i>
<ul>
<li class="items0">北京</li>
<li class="items0">天津</li>
<li class="items0">河北</li>
<li class="items0">山西</li>
<li class="items0">內蒙古</li>
<li class="items0">遼寧</li>
<li class="items0">吉林</li>
<li class="items0">黑龍江</li>
<li class="items0">上海</li>
<li class="items0">江蘇</li>
</ul>
</div>
<div class="right1" style="float:right;">
<li>迎光臨當當，請<a href="#">登錄</a></li>
<li><a href="#">成為會員</a>|</i></li>
<li><a href="#">我的云書房</a>|</li>
<li class="items" style="width:78px;"><a href="#">我的當當</a><i class="fa fa-angle-down"></i> |
<div class="lili" href="#">我的訂單</div>
</li>
<li><a href="#">小說投稿</a>|</li>
<li><a href="#">我要出書</a>|</li>
<li class="items" style="width:80px;"><a href="#">企業(yè)采購</a><i class="fa fa-angle-down"></i> |
<div class="lili" href="#">大宗采購</div>
</li>
<li class="items" style="width:78px;"><a href="#">客戶服務</a><i class="fa fa-angle-down"></i>
<div class="lili" href="#">幫助中心</div>
</li>
</div>
</div>
</div>
</div>
</body>
</html>
添削の先生：天蓬老師添削時間：2019-01-27 16:53:06
先生のまとめ：你的代碼嵌套, 是不是有點太深了, 通過建議不超過三層