CSS3提供了很多新的特性，其中一項(xiàng)就是能夠很容易地實(shí)現(xiàn)導(dǎo)航下拉效果。

nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
display: inline-block;
}
nav ul li >ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
nav ul li:hover >ul {
display: block;
}
nav ul li >ul li {
display: block;
width: 100%;
}

我們首先給導(dǎo)航欄的無序列表設(shè)定一些基礎(chǔ)樣式，比如去掉默認(rèn)樣式、去掉邊距和內(nèi)邊距等。接著，我們給每個(gè)導(dǎo)航項(xiàng)（li）設(shè)置一些基礎(chǔ)的樣式，比如相對(duì)定位。

然后，我們針對(duì)每個(gè)導(dǎo)航項(xiàng)下面的子菜單（ul），設(shè)定一些默認(rèn)樣式，比如讓它們都不顯示，并且絕對(duì)定位到它們父元素（li）的底部。

接下來，我們使用:hover偽類來設(shè)定鼠標(biāo)懸浮在導(dǎo)航項(xiàng)上時(shí)子菜單的顯示效果，即將其display屬性設(shè)為block（默認(rèn)是none），從而讓它們顯示出來。

最后，我們對(duì)每個(gè)子菜單下面的菜單項(xiàng)（li）設(shè)定一些基礎(chǔ)樣式，比如讓它們顯示為塊級(jí)元素，并且寬度為100%。

利用這些CSS3特性，我們就能夠很容易地實(shí)現(xiàn)導(dǎo)航下拉效果了。