使用HTML+CSS实现鼠标划过的二级菜单栏
生活随笔
收集整理的這篇文章主要介紹了
使用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><!-- -------菜單html代碼---------begin------- --><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><!-- -------菜單html代碼---------end------- --></body> </html>?
轉載于:https://www.cnblogs.com/wuqianling/p/6762146.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的使用HTML+CSS实现鼠标划过的二级菜单栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue入门基础篇笔记1
- 下一篇： 百度前端技术学院2017学习总结