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

HTML

使用HTML+CSS实现鼠标划过的二级菜单栏

發布時間：2025/4/16 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了使用HTML+CSS实现鼠标划过的二级菜单栏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先上效果圖：

1、鼠標沒在上面

2、鼠標放在一級菜單上，展開二級菜單

3、鼠標放在二級菜單上

代碼：?(點擊此處預覽代碼效果)

<html> <head><title>二級菜單測試</title><meta charset="utf-8"><style type="text/css">/*為了使菜單居中*/body {padding-top:100px;text-align:center; }/* -------------菜單css代碼----------begin---------- */.menuDiv { border: 2px solid #aac; overflow: hidden; display:inline-block;}/* 去掉a標簽的下劃線 */.menuDiv a {text-decoration: none;}/* 設置ul和li的樣式 */.menuDiv ul , .menuDiv li {list-style: none;margin: 0;padding: 0;float: left;} /* 設置二級菜單絕對定位，并隱藏 */.menuDiv > ul > li > ul {position: absolute;display: none;}/* 設置二級菜單的li的樣式 */.menuDiv > ul > li > ul > li {float: none;}/* 鼠標放在一級菜單上，顯示二級菜單 */.menuDiv > ul > li:hover ul {display: block;}/* 一級菜單 */.menuDiv > ul > li > a {width: 120px;line-height: 40px;color: black;background-color: #cfe;text-align: center;border-left: 1px solid #bbf;display: block;}/* 在一級菜單中，第一個不設置左邊框 */.menuDiv > ul > li:first-child > a {border-left: none;}/* 在一級菜單中，鼠標放上去的樣式 */.menuDiv > ul > li > a:hover {color: #f0f;background-color: #bcf;}/* 二級菜單 */.menuDiv > ul > li > ul > li > a {width: 120px;line-height: 36px;color: #456;background-color: #eff;text-align: center;border: 1px solid #ccc;border-top: none;display: block;}/* 在二級菜單中，第一個設置頂邊框 */.menuDiv > ul > li > ul > li:first-child > a {border-top: 1px solid #ccc;}/* 在二級菜單中，鼠標放上去的樣式 */.menuDiv > ul > li > ul > li > a:hover {color: #a4f;background-color: #cdf;}/* -------------菜單css代碼----------end---------- */</style> </head> <body><div class="menuDiv"><ul><li><a href="#">菜單一</a><ul><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li></ul></li> <li><a href="#">菜單二</a><ul><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li></ul></li> <li><a href="#">菜單三</a><ul><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li></ul></li> <li><a href="#">菜單四</a></li> <li><a href="#">菜單五</a><ul><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li><li><a href="#">二級菜單</a></li></ul></li> </ul></div></body> </html>

轉載于:https://www.cnblogs.com/wuqianling/p/6762146.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的使用HTML+CSS实现鼠标划过的二级菜单栏的全部內容，希望文章能夠幫你解決所遇到的問題。

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