abstrait：html代碼如下：（html盡量做個(gè)簡(jiǎn)潔明了，不要用太多的class，盡量在css里用派生選擇器）<!DOCTYPE html><html><head> <meta charset="utf-8"> <link rel="s
html代碼如下：（html盡量做個(gè)簡(jiǎn)潔明了，不要用太多的class，盡量在css里用派生選擇器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<title>鼠標(biāo)放到菜單自動(dòng)彈出下拉菜單</title>
</head>
<body>
<div class="header">
<div class="content">
<div class="content_left">
<a href="#">中國(guó)大陸 <span class="fa fa-angle-down"></span>
<ul>
<li>
全球
</li>
<li>
香港
</li>
</ul>
</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
/******************引出CSS代碼部分********************(重要知識(shí)點(diǎn)：在要下拉菜單的地方元素做成inline-block行內(nèi)塊元素，在隱藏下拉的上級(jí)做position:relative相對(duì)定位，需要下拉的block元素做position:absolute定位)，做完記得清除浮動(dòng)*/
*{margin:0;padding: 0;}
a{
text-decoration: none;color:#000;
}
.header{
width:100%;height:40px;background: #F5F5F5;
}
.content{
width:1200px;margin:0 auto;background: pink;
height: 40px;line-height: 40px;font-size: 13px
}
.content_left{
float:left;height:40px;
display: inline-block;
}
.content_left a{
margin-right: 5px;position: relative;display: inline-block;
}
.content_left a:hover ul{
display: block;position: absolute;
}
.content_left a ul {display: none;width:100px;}
.content_left a ul li{list-style:none;width:80px;background: red;text-align: left;}
.content_right{
width:600px;float:right;height:40px;background: red
}
Professeur correcteur：天蓬老師Temps de correction：2019-01-15 14:23:35
Résumé du professeur：.content_left, 使用下劃線連接是不多見(jiàn)的, 大多用連接線: -