摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="csss/nav.css">
<!--外部CSS部分-->
*{margin: 0px; padding: 0px;}
.clear{
clear: both;
}
li{
list-style: none;
}
a{
text-decoration: none;
font-size: 13px;
color:RGB(108,108,108);
}
#header{
width:auto;
background-color: RGB(245,245,245);
}
.header_content{
width: 1190px;
margin: 0px auto;
line-height: 40px;
text-align: center;
position:relative;
}
.header_left{
height: 40px;
float: left;
}
.header_right{
height: 40px;
float: right;
}
.header_left a{
margin-right: 10px;
display: inline-block;
height: 40px;
}
.header_right a{
margin-right: 1px;
display: inline-block;
height: 40px;
width:82px;
}
.header_a:hover{
background-color:RGB(255,255,255);
color:RGB(242,61,19);
}
.header_a1:hover{
color:RGB(242,61,19);
}
.header_a ul{
position:absolute;
text-align: left;
padding: 3px;
}
.header_a ul li{
color:RGB(108,108,108);
font-size: 13px;
display:none;
border: 1px solid RGB(255,255,255);
height: 30px;
}
.header_a:hover ul li{
display: block;
}
.header_a ul li:hover{
background-color:RGB(245,245,245);
}
<!--外部CSS文件完毕-->
<link rel="stylesheet" type="text/css" href="csss/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<title>导航下拉菜单的总结</title>
</head>
<body>
<div id="header">
<div class="header_content">
<div class="header_left">
<a href=""class="header_a">中国大陆 <samp class="fa fa-angle-down"></samp></span>
<ul>
<li>中国大陆</li>
<li>香港</li>
<li>台湾</li>
<li>澳门</li>
</ul>
</a>
<a href=""style="color: RGB(242,61,19)">亲，请登录</a>
<a href=""class="header_a1" >免费注册</a>
<a href=""class="header_a1">手机逛淘宝</a>
</div>
<div class="header_right">
<a href="" class="header_a">我的淘宝 <samp class="fa fa-angle-down"></samp>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""class="header_a"><i class="fa fa-cart-plus" style="color:RGB(242,61,19)"></i> 购物车<span style="color: RGB(242,61,19)">0</span></a>
<a href=""class="header_a">收藏夹
<ul>
<li>中收藏宝贝</li>
<li>收藏店铺</li>
</ul>
</a>
<a href=""class="header_a1">商品分类</a>
<a href=""class="header_a">卖家中心 <samp class="fa fa-angle-down"></samp>
<ul>
<li>免费开店</li>
<li>体检中心</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
</ul>
</a>
<a href=""class="header_a">联系客服 <samp class="fa fa-angle-down"></samp>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</a>
<a href=""class="header_a"><i class="fa fa-list" style="color:RGB(242,61,19)"></i> 网站导航 <samp class="fa fa-angle-down"></samp>
<ul>
<li>主题市场</li>
<li>特色市场</li>
<li>阿里APP</li>
<li>精彩推荐</li>
</ul>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>下拉菜单总结：
1、下拉菜单可以使用无序列表 <ul><li>来制作，也可以使用div来制作；
2、使用display:none; 来隐藏ul列表元素；
3、伪属性hover 使用display:block;让隐藏的元素显示；
4、给父级元素设置相对定位，给下面的ul绝对定位，这样就不影响其他元素了。
批改老师：天蓬老师批改时间：2019-01-21 17:51:40
老师总结：这个案例中, 绝对定位非常关键, 也是考核的重点
