css下拉菜单全代码
生活随笔
收集整理的這篇文章主要介紹了
css下拉菜单全代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
普通的下拉菜單 點個贊加個關(guān)注 一起見證我的成長吧
?
<!DOCTYPE html> <html> <head><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li {float: left;}li a, .dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover, .dropdown:hover .dropbtn {background-color: red;}li.dropdown {display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-index: 1;}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display: block;}</style> </head> <body> <ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Dropdown</a><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></li> </ul> <h1>導(dǎo)航欄內(nèi)的下拉菜單</h1> <p>請懸停到 "Dropdown" 鏈接上，以查看下拉菜單。</p> </body> </html>總結(jié)
以上是生活随笔為你收集整理的css下拉菜单全代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何给宝宝起个好名？三点原则！起名有道，
- 下一篇： STM32 cudeIDE使用J-lin