サマリー：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 960px;
height: 40px;
margin: 50px auto;
}
.nav ul{
list-style: none;
}
.nav ul li{
float: left;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: yellowgreen;
position: relative;
}
.nav ul li a{
text-decoration: none;
color: white;
}
.nav ul li .dropbox{
position: absolute;
top: 40px;
left: 0;
width: 180px;
display: none;
padding-top: 10px;
}
.nav ul li .dropbox .inner{
background-color: #ccc;
}
.nav ul li .dropbox a{
display: block;
line-height: 30px;
height: 30px;
text-align: left;
}
.nav ul li .dropbox a:hover{
background-color: pink;
}
.news:hover .dropbox{
display: block;
}
.cai:hover .dropbox{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">欄目名稱</a></li>
<li class="news">
<a href="#">公司新聞</a>
<div class="dropbox">
<div class="inner">
<p><a href="">北京總部新聞</a></p>
<p><a href="">上海分公司新聞</a></p>
<p><a href="">東莞分公司新聞</a></p>
<p><a href="">遼寧分公司新聞</a></p>
</div>
</div>
</li>
<li class="cai">
<a href="#">公司財(cái)務(wù)</a>
<div class="dropbox">
<div class="inner">
<p><a href="">2011財(cái)務(wù)</a></p>
<p><a href="">2012財(cái)務(wù)</a></p>
<p><a href="">2013財(cái)務(wù)</a></p>
<p><a href="">2014財(cái)務(wù)</a></p>
<p><a href="">2015財(cái)務(wù)</a></p>
<p><a href="">2016財(cái)務(wù)</a></p>
</div>
</div>
</li>
<li><a href="#">欄目名稱</a></li>
<li><a href="#">欄目名稱</a></li>
<li><a href="#">欄目名稱</a></li>
<li><a href="#">欄目名稱</a></li>
<li><a href="#">欄目名稱</a></li>
</ul>
</div>
</body>
</html> 自己理解：導(dǎo)航菜單都差不多，用ul li 浮動(dòng)完成，再加上偽類，來(lái)做鼠標(biāo)放上樣式，切記div要清除浮動(dòng)
添削の先生：天蓬老師添削時(shí)間：2019-01-24 08:52:09
先生のまとめ：這類菜單 的重點(diǎn), 就在于事件 , 與絕對(duì)定位, 關(guān)鍵代碼與原理掌握就好寫了