abstrak：html部分 <a href="" class="header-a">我的淘寶&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-down"></i> <ul> <li>已買到的寶貝<

html部分
<a href="" class="header-a">我的淘寶&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-down"></i>
<ul>
<li>已買到的寶貝</li>
<li>我的足跡</li>
</ul>
</a>


css部分
.header-a{
display: inline-block;
width: 90px;
height: 40px;
text-align: center;
position: relative;
}

.header-a:hover{
background: #fff;
}

.header-a ul{
border: 1px solid #f5f5f5;
display: none;
border-top: none;
}

.header-a:hover ul{
display: block;
position: absolute;
width: 100px;
}

.header-a ul li{
color: #6c6c6c;
height: 30px;
line-height: 30px;
text-align: left;
padding: 0 3px;
margin: 5px 0px;
}

.header-a ul li:hover{
background: #f5f5f5;
}

1.下拉菜單案例 視頻中老師給父標(biāo)簽設(shè)置了position: relative 然后給子標(biāo)簽ul設(shè)置了絕對定位 
  我的理解： 這樣設(shè)置后子標(biāo)簽就相對于父標(biāo)簽定位,鼠標(biāo)移入父標(biāo)簽后子標(biāo)簽就顯示在下方，不會把其他元素
  的位置給拉下來。

Guru membetulkan：韋小寶Masa pembetulan：2019-03-14 09:11:56
Rumusan guru：寫的很不錯 css來實現(xiàn)下拉菜單還是蠻簡單的 總的來說要比js來實現(xiàn)簡單多了