下拉菜单案例

摘要：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.下拉菜单案例 视频中老师给父标签设置了position: relative 然后给子标签ul设置了绝对定位 
  我的理解： 这样设置后子标签就相对于父标签定位,鼠标移入父标签后子标签就显示在下方，不会把其他元素
  的位置给拉下来。

批改老师：韦小宝批改时间：2019-03-14 09:11:56
老师总结：写的很不错 css来实现下拉菜单还是蛮简单的 总的来说要比js来实现简单多了