代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉框</title> <style type="text/css"> *{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{ float:left; line-height:40px; text-align:center; position:relative;} #nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;} #nav ul li a:hover{ color:#FFF; background:#333} #nav ul li ul{ position:absolute; display:none;} #nav ul li ul li{ float:none; line-height:30px; text-align:left;} #nav ul li ul li a{ width:100%;} #nav ul li ul li a:hover{ background-color:#06f;} #nav ul li:hover ul{ display:block} </style> </head> <p id="nav"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">學(xué)習(xí)中心</a> <ul> <li><a href="#">java</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">C++</a></li> <li><a href="#">C語(yǔ)言</a></li> </ul> </li> <li><a href="#">個(gè)人中心</a></li> <li><a href="#">關(guān)于我們</a></li> </ul> </p> <body> </body> </html>
效果圖：
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注 其它相關(guān)文章！
推薦閱讀：
CSS的Selector使用詳解
CSS3的filter(濾鏡)屬性詳解
詳解CSS之margin的特殊使用技巧
以上就是用HTML+CSS實(shí)現(xiàn)下拉菜單的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注 其它相關(guān)文章！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
新聞熱點(diǎn)
疑難解答
