导航栏内的下拉菜单
![](https://img2023.cnblogs.com/blog/383853/202301/383853-20230113101848254-168170191.png)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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; } .active { background-color: #4CAF50; } </style> </head> <body> <ul> <li class="active"><a href="#home">首页</a></li> <li><a href="#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> <li><a href="#news">产品</a></li> <li style="float:right"><a class="active" href="#about">关于</a></li> </ul> <h1>导航栏内的下拉菜单</h1> <p>请悬停到 "Dropdown" 链接上,以查看下拉菜单。</p> </body> </html>