控制檯顯示:
多了三個空的a標籤。
HTML:
<!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">
<link rel="stylesheet" href="中國大陸.css">
<title>淘寶網 - 淘!我喜歡</title>
</head>
<body>
<div id="main_page">
<div id="page_top">
<!-- 左邊欄一級導航 -->
<ul class="nav_left">
<li><a href="#">中國大陸</a>
<!-- 二級導航開始 -->
<ul>
<li><a href="#1">全球</a></li>
<li><a href="#1">中國大陸</a></li>
<li><a href="#1">中國澳門</a></li>
<li><a href="#1">中國臺灣</a></li>
<li><a href="#1">韓國</a></li>
<li><a href="#1">馬來西亞</a></li>
<li><a href="#1">澳大利亞</a></li>
<li><a href="#1">新加坡</a></li>
<li><a href="#1" >新西蘭</a></li>
<li><a href="#1">加拿大</a></li>
<li><a href="#1">美國</a></li>
<li><a href="#1">日本</a></li>
</ul>
<!-- 二級導航結束 -->
</li>
<li><a href="#">親,請登錄</a></li>
<li><a href="#">免費註冊</a></li>
<li><a href="#">手機逛淘寶</a></li>
</ul>
<!-- 右邊欄一級導航 -->
<ul class="nav_right">
<li><a href="#">我的淘寶</a>
<!-- 二級導航開始 -->
<ul>
<li><a href="#2">已買到的寶貝</a></li>
<li><a href="#2">我的寶貝</a></li>
</ul>
<!-- 二級導航結束 -->
</li>
<li><a href="#">購物車</a></li>
<li><a href="#">收藏夾</a>
<!-- 二級導航開始 -->
<ul>
<li><a href="#3">收藏的寶貝</a></li>
<li><a href="#3">收藏的店鋪</a></li>
</ul>
<!-- 二級導航結束 -->
</li>
<li><a href="#">商品分類</a></li>
<li><a href="#">千賣家中心</a>
<!-- 二級導航開始 -->
<ul>
<li><a href="#4">免費開店</a></li>
<li><a href="#4">已賣出的寶貝</a></li>
<li><a href="#4">出售中的寶貝</a></li>
<li><a href="#4">賣家服務市場</a></li>
<li><a href="#4">賣家培訓中心</a></li>
<li><a href="#4">體驗中心</a></li>
<li><a href="#4">問商友</a></li>
</ul>
<!-- 二級導航結束 -->
</li>
<li><a href="#">聯繫客服</a>
<!-- 二級導航開始 -->
<ul>
<li><a href="#5">消費者客服</a></li>
<li><a href="#5">賣家客服</a></li>
</ul>
<!-- 二級導航結束 -->
</li>
<li><a href="#">網站導航</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
/* 設置頂部導航的背景 高寬 */
#main_page #page_top{
background-color: #f5f5f5;
width: 1190px;
height: 30px;
margin: 0 auto;
}
/* 設置左邊的導航向左浮動 右邊的向右浮動 */
#page_top ul.nav_left{
float: left;
list-style: none;
overflow: hidden;
}
#page_top ul.nav_right{
float: right;
list-style: none;
overflow: hidden;
}
/* 爲了使列表項在一行上面,
讓列表項也浮動 */
#page_top ul.nav_left > li,#page_top ul.nav_right > li{
float: left; /*不要忘記解決高度塌陷問題 */
}
/* 設置左邊欄一級導航中的連接 */
#page_top > ul.nav_left > li > a{
display: block;
text-decoration: none;
text-align: center;
color: black;
font: 12px/30px "微軟雅黑";
width: 75px;
height: 30px;
}
#page_top > ul.nav_left > li:nth-child(2) > a{
color: red;
}
/* 右邊一級導航 */
#page_top > ul.nav_right > li > a{
display: block;
text-decoration: none;
text-align: center;
color: black;
font: 12px/30px "微軟雅黑";
width: 90px;
height: 30px;
}
/* 默認二級導航不顯示 */
#page_top > ul.nav_left > li > ul,#page_top > ul.nav_right > li > ul{
display: none;
}
/* 左邊一級導航欄中的二級導航部分 */
#page_top > ul.nav_left > li:hover > ul{
list-style: none;
box-sizing: border-box;
border: 1px #f5f5f5 solid;
}
#page_top > ul.nav_left > li > ul a{
display: block;
text-decoration: none;
color: black;
/* 一級導航的寬度爲解決 */
width: 200px;
height: 30px;
font: 12px/30px "微軟雅黑";
box-sizing: border-box;
padding-left: 10px;
}
/* 右邊一級導航欄中的二級導航 */
#page_top > ul.nav_right > li > ul{
list-style: none;
box-sizing: border-box;
border: 1px #f5f5f5 solid;
}
#page_top > ul.nav_right > li > ul a{
display: block;
text-decoration: none;
color: black;
width: 75px;
height: 30px;
font: 12px/30px "微軟雅黑";
box-sizing: border-box;
padding-left: 10px;
}
emmmmmm,都快對自己無語死了,是自己粗心造成的
原因——a標籤沒有閉合!!!
要細心!!!要細心!!!要細心!!!
重要的事情說三遍!!!!