web前端实战系列[4]——多级菜单
生活随笔
收集整理的這篇文章主要介紹了
web前端实战系列[4]——多级菜单
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.代碼
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>三級(jí)菜單</title><style type="text/css">.top-nav{ font-family: "Microsoft Yahei"; font-size: 12px; font-weight: bold;list-style: none; margin: 0 auto;padding: 0 auto;}.top-nav li{ float:left; margin-right: 1px; }.top-nav li a{ line-height: 20px; text-decoration: none; background-color: #eee; color: #666;display: block; width: 80px; text-align: center;}.top-nav li ul{ display: none; list-style: none; padding:0;position:relative; }/*最后一句解決了二級(jí)菜單和一級(jí)菜單沒(méi)對(duì)齊的問(wèn)題*//*鼠標(biāo)移動(dòng)到超鏈接上菜單變色*/.top-nav li a:hover{background-color:blue; color:white; }/*鼠標(biāo)移動(dòng)到一級(jí)菜單的時(shí)候要顯示二級(jí)菜單*/.top-nav li:hover ul{ display: block; width: 80px; background-color: #827bdd; }/*二級(jí)菜單顯示的時(shí)候需要隱藏三級(jí)菜單*/.top-nav li:hover ul li ul{ display: none; }/*三級(jí)菜單在二級(jí)菜單范圍內(nèi)浮動(dòng)*/.top-nav li ul li:hover ul{ display: block; top:0; left:81px; position: absolute;}</style></head> <body><ul class="top-nav"><li class="firstMenu"><a href="#">首頁(yè)</a></li><li class="firstMenu"><a href="#">課程大廳+</a><ul><li><a href="#">前端+</a><ul><li><a href="#">JavaScript</a></li><li><a href="#">JQuery</a></li><li><a href="#">CSS</a></li></ul></li><li><a href="#">后臺(tái)</a></li><li><a href="#">手機(jī)</a><ul><li><a href="#">Android開(kāi)發(fā)</a></li><li><a href="#">IOS開(kāi)發(fā)</a></li></ul></li></ul></li><li class="firstMenu"><a href="#">學(xué)習(xí)中心+</a><ul><li><a href="#">視頻學(xué)習(xí)</a></li><li><a href="#">案例學(xué)習(xí)</a></li><li><a href="#">交流平臺(tái)</a></li></ul></li><li class="firstMenu"><a href="#">經(jīng)典案例</a></li><li class="firstMenu"><a href="#">關(guān)于我們</a></li></ul> </body> </html>?
2.總結(jié)
1).去列表前面的圓點(diǎn)：list-style:none.
2).怎么讓二級(jí)菜單豎著排列？加width。
轉(zhuǎn)載于:https://www.cnblogs.com/helloIT/articles/5155892.html
總結(jié)
以上是生活随笔為你收集整理的web前端实战系列[4]——多级菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 《面向对象程序设计》第一次作业
- 下一篇： 【转】 (C#)利用Aspose.Cel