Web網(wǎng)站中很多時候都會出現(xiàn)下拉導(dǎo)航條，有的是通過CSS實現(xiàn)，有的通過JavaScript插件實現(xiàn)，其實CSS實現(xiàn)起來比較簡單,先來看一個簡版的下拉菜單:

Html代碼通過ul列表實現(xiàn):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<ul?class="nav"> ???????<li>首頁</li> ???????<li>產(chǎn)品</li> ???????<li>服務(wù) ???????????<ul> ???????????????<li>設(shè)計</li> ???????????????<li>研發(fā)</li> ???????????????<li>交付</li> ???????????</ul> ???????</li> ???????<li>關(guān)于我們 ???????????<ul> ???????????????<li>博客園</li> ???????????????<li>FlyElephant</li> ???????????????<li>keso</li> ???????????</ul> ???????</li> ???</ul>

CSS代碼如下:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

.nav { ????margin-left: 200px; ????margin-top:200px; } .nav li { ????float: left; ????width: 150px; ????background-color: #00C5CD; ????padding-top: 10px; ????padding-bottom: 10px; ????text-align: center; ????border-right: 1px solid #fff; } .nav li:last-child { ????border-right: none; } .nav li ul { ????width: 150px; ????position: absolute; ????margin-top: 10px; ????left: 9999px; } .nav li ul li { ????background-color: #00EE00; ????border-bottom: 1px solid #fff; } .nav li:hover ul { ????left: auto; }

　里面很重要的一點就是在正常狀態(tài)下將需要展示的ul位置只放在屏幕之外，left:9999px,鼠標(biāo)滑動上的時候?qū)eft設(shè)置為auto~

本文轉(zhuǎn)自Fly_Elephant博客園博客，原文鏈接：http://www.cnblogs.com/xiaofeixiang/p/5038552.html，如需轉(zhuǎn)載請自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的CSS-下拉导航条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。