abstract： <div class="header_r"> <a href="#">淘寶網(wǎng)首頁</a> <a href="#" class="down"> 我的淘寶&nbsp&nbsp<i class="fa f

<div class="header_r">

<a href="#">淘寶網(wǎng)首頁</a>

<a href="#" class="down">

我的淘寶&nbsp&nbsp<i class="fa fa-angle-down" id="down"></i>

<ul>

<li>已買到的寶貝</li>

<li>我的足跡</li>

</ul>

</a>

<a href="#" class="down"><i class="fa fa-shopping-cart" id="shopcar"></i>&nbsp購物車&nbsp&nbsp<i class="fa fa-angle-down" id="down"></i></a>

<a href="#" class="down"><i class="fa fa-star"></i>&nbsp收藏夾&nbsp&nbsp<i class="fa fa-angle-down" id="down"></i></a>

<a href="#" >商品分類</a>

<span></span>

<a href="#" class="down">賣家中心&nbsp&nbsp<i class="fa fa-angle-down" id="down"></i></a>

<a href="#" class="down">聯(lián)系客服&nbsp&nbsp<i class="fa fa-angle-down" id="down"></i></a>

<a href="#" class="down"><i class="fa fa-navicon (alias)" id="more"></i>&nbsp網(wǎng)站導(dǎo)航&nbsp&nbsp<i class="fa fa-angle-down" id="down"></i></a>

</div>

CSS文件：

.nav .header .header_r a{

position:relative;

}

.nav .header .header_r a ul{

display: none;

border:1px solid #F5F5F5;

border-top:0px;

position: absolute;

left:-1px;

padding: 10px 0px;

}

.nav .header .header_r a ul li{

width: 80px;

line-height: 26px;

font:12px;

font-family:'Microsoft YaHei','宋體';

color:#6C6C6C;

}

.nav .header .header_r a:hover ul{

display: block;

}

.nav .header .header_r a ul li:hover{

background-color: #F5F5F5;

} 

總結(jié):下拉菜單我覺得核心在于對position定位的理解，常用的父相子絕法除了實(shí)現(xiàn)隱藏盒子的定位，還有盒子的大小。

Correcting teacher：查無此人Correction time：2019-04-16 10:03:03
Teacher's summary：完成的不錯?？偨Y(jié)的也不錯。定位是css里很難的了，要熟練掌握。繼續(xù)加油。