在制作HTML下拉菜單時(shí),會(huì)用到很多CSS屬性,比如:hover,list-style,float浮動(dòng),display屬性等等,如有不清楚的小伙伴可以看看我以前的文章,之前都有介紹過,或者訪問 CSS3視頻教程 。
實(shí)例示范:制作一個(gè)導(dǎo)航,當(dāng)鼠標(biāo)經(jīng)過“學(xué)習(xí)視頻”時(shí),會(huì)顯示相關(guān)的課程分類,比如JavaScript,C++等等,具體代碼如下:
HTML部分:
div id= nav li a href= # 首頁 /a /li li a href= # 學(xué)習(xí)視頻 /a li a href= # java /a /li li a href= # jQuery /a /li li a href= # C++ /a /li li a href= # PHP /a /li li a href= # JavaScript /a /li /ul /li li a href= # 個(gè)人中心 /a /li li a href= # 關(guān)于我們 /a /li /ul /div
CSS部分:
*{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{width: 150px; float:left; line-height:40px; text-align:center; position:relative;} #nav ul li a{ text-decoration:none; color:#000; display:block;text-align: center;} #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}
效果圖:
以上主要介紹了如何用HTML和CSS制作下拉菜單,工作中用的比較多,有需要的朋友可以直接拿去使用,或者修改成自己喜歡的樣式,希望這篇文章對(duì)你有所幫助。
【相關(guān)教程推薦】
1. HTML視頻教程
2. CSS視頻教程
3. bootstrap教程
以上就是HTML+CSS制作簡(jiǎn)單下拉菜單的實(shí)例代碼的詳細(xì)內(nèi)容,其它編程語言
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答