一. 簡(jiǎn)單的說就是列表里面再嵌套一個(gè)列表：
<ul id="nav">
<li><a href="#">HTML教程</a>
<ul>
<li><a href="#">輝輝傻逼 </a></li>
<li><a href="#">輝輝傻逼 </a></li>
<li><a href="#">輝輝傻逼 </a></li>
</ul>
</li>
</ul>
二. css樣式設(shè)置
應(yīng)由外向內(nèi)設(shè)置樣式。
先介紹幾種樣式：
-
display:block:表示元素顯示為行級(jí)元素缎患，獨(dú)占一行惋增。可設(shè)置元素的寬度和高度堕伪。
display:inline-block:表示元素顯示為內(nèi)聯(lián)行級(jí)元素揖庄，既可并排顯示，也可設(shè)置元素的寬度和高度欠雌。 -
font:14px/20px arial;表示字體大小為14px,行高為20px,字體為arial;相當(dāng)于下面三行代碼：
font-size:14px;
line-height:20px;
font-family:arial;
其中蹄梢，將line-height設(shè)置為與容器的高度相等可實(shí)現(xiàn)元素垂直居中，text-align只能實(shí)現(xiàn)水平居中富俄。
- 要想讓標(biāo)簽ul里面的標(biāo)簽li里面的元素并排顯示禁炒，必須將最外層li樣式設(shè)置為
display:inline-block;否則一行只能顯示一個(gè)li元素。并且標(biāo)簽li里面的超鏈接樣式也要設(shè)置為display:inline-block;才能進(jìn)行相應(yīng)的樣式設(shè)置霍比，否則樣式設(shè)置受到限制幕袱。
#nav li{
display:inline-block;
}
#nav li a{
display:inline-block;
padding:0 20px;
color:#FFF;
text-decoration:none;
font:17px/60px arial;/*17px代表字體大小，60px代表行高悠瞬，arial代表字體;*/
}
- 將li標(biāo)簽里面的嵌套列表ul的定位設(shè)置為絕對(duì)定位
position:absolute;表示相對(duì)于父級(jí)元素定位们豌，要想讓二級(jí)列表里面的內(nèi)容隱藏起來，則將ul樣式設(shè)置為display:none;.
#nav li ul {
position:absolute;
display:none;
}
- 這點(diǎn)特別關(guān)鍵浅妆，決定了二級(jí)菜單的下拉效果垂直顯示望迎，否則下拉后只能并排顯示。
#nav li ul li {
display: block;
}
- 接下來可將二級(jí)菜單中的超鏈接a的背景顏色設(shè)置為與一級(jí)菜單中的一樣凌外，讓看起來像個(gè)整體辩尊。
#nav li ul li a {
background:#00A2CA;
}
- 這點(diǎn)也非常重要，決定了二級(jí)列表能否顯示趴乡。即當(dāng)鼠標(biāo)移到一級(jí)菜單上時(shí)对省，二級(jí)菜單能否下拉。
#nav li:hover ul{
display:block;
}
三.整體代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
text-align:center;
}
ul, li{
margin:0;
padding:0;
font-style: normal;
list-style:none;
}
#nav{
width:100%;
height:60px;
background:#00A2CA;
margin:0 auto;
overflow:hidden;
}
#nav li{
display:inline-block;
}
#nav li a{
display:inline-block;
padding:0 20px;
color:#FFF;
text-decoration:none;
font:17px/60px arial;/*17px代表字體大小晾捏，60px代表行高蒿涎，arial代表字體;*/
}
#nav li a:hover{
background:#0095BB;
}
#nav li ul {
position:absolute;
display:none;
}
#nav li ul li {
display: block;
}
#nav li ul li a {
background:#00A2CA;
}
#nav li:hover ul{
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a >首頁</a></li>
<li><a href="#">HTML教程</a>
<ul>
<li><a href="#">輝輝傻逼 </a></li>
<li><a href="#">輝輝傻逼 </a></li>
<li><a href="#">輝輝傻逼 </a></li>
</ul>
</li>
<li><a href="#">CSS基礎(chǔ)</a>
<ul>
<li><a href="#">輝輝最帥</a></li>
<li><a href="#">輝輝最帥</a></li>
<li><a href="#">輝輝最帥</a></li>
<li><a href="#">輝輝最帥</a></li>
</ul>
</li>
<li><a href="#">CSS開發(fā)工具</a>
<ul>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
<li><a href="#">heheheheheH</a></li>
</ul>
</li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">CSS問題</a></li>
</ul>
</body>
</html>
