當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端实战系列[4]——多级菜单

發布時間：2025/3/14 HTML 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端实战系列[4]——多级菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.代碼

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>三級菜單</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; }/*最后一句解決了二級菜單和一級菜單沒對齊的問題*//*鼠標移動到超鏈接上菜單變色*/.top-nav li a:hover{background-color:blue; color:white; }/*鼠標移動到一級菜單的時候要顯示二級菜單*/.top-nav li:hover ul{ display: block; width: 80px; background-color: #827bdd; }/*二級菜單顯示的時候需要隱藏三級菜單*/.top-nav li:hover ul li ul{ display: none; }/*三級菜單在二級菜單范圍內浮動*/.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="#">首頁</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="#">后臺</a></li><li><a href="#">手機</a><ul><li><a href="#">Android開發</a></li><li><a href="#">IOS開發</a></li></ul></li></ul></li><li class="firstMenu"><a href="#">學習中心+</a><ul><li><a href="#">視頻學習</a></li><li><a href="#">案例學習</a></li><li><a href="#">交流平臺</a></li></ul></li><li class="firstMenu"><a href="#">經典案例</a></li><li class="firstMenu"><a href="#">關于我們</a></li></ul> </body> </html>

2.總結

1).去列表前面的圓點：list-style:none.
2).怎么讓二級菜單豎著排列？加width。

轉載于:https://www.cnblogs.com/helloIT/articles/5155892.html

總結

以上是生活随笔為你收集整理的web前端实战系列[4]——多级菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。