abstrak：<!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>導(dǎo)航下拉菜單的總結(jié)</title>
</head>
<body>
<div id="header">
<div class="header_content">
<div class="header_left">
<a href=""class="header_a">中國(guó)大陸 <samp class="fa fa-angle-down"></samp></span>
<ul>
<li>中國(guó)大陸</li>
<li>香港</li>
<li>臺(tái)灣</li>
<li>澳門</li>
</ul>
</a>
<a href=""style="color: RGB(242,61,19)">親，請(qǐng)登錄</a>
<a href=""class="header_a1" >免費(fèi)注冊(cè)</a>
<a href=""class="header_a1">手機(jī)逛淘寶</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> 購(gòu)物車<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>免費(fèi)開店</li>
<li>體檢中心</li>
<li>已賣出的寶貝</li>
<li>出售中的寶貝</li>
</ul>
</a>
<a href=""class="header_a">聯(lián)系客服 <samp class="fa fa-angle-down"></samp>
<ul>
<li>消費(fèi)者客服</li>
<li>賣家客服</li>
</ul>
</a>
<a href=""class="header_a"><i class="fa fa-list" style="color:RGB(242,61,19)"></i> 網(wǎng)站導(dǎo)航 <samp class="fa fa-angle-down"></samp>
<ul>
<li>主題市場(chǎng)</li>
<li>特色市場(chǎng)</li>
<li>阿里APP</li>
<li>精彩推薦</li>
</ul>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>下拉菜單總結(jié)：
1、下拉菜單可以使用無序列表 <ul><li>來制作，也可以使用div來制作；
2、使用display:none; 來隱藏ul列表元素；
3、偽屬性hover 使用display:block;讓隱藏的元素顯示；
4、給父級(jí)元素設(shè)置相對(duì)定位，給下面的ul絕對(duì)定位，這樣就不影響其他元素了。
Guru membetulkan：天蓬老師Masa pembetulan：2019-01-21 17:51:40
Rumusan guru：這個(gè)案例中, 絕對(duì)定位非常關(guān)鍵, 也是考核的重點(diǎn)