<div class="main"><div class="nav"><ul><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></li><li><a href="#">项目四</a></li><li><a href="#">项目五</a></li><li><a href="#">项目六</a></li></ul></div></div>
<style>*{margin: 0;padding: 0;}.main{width: 100%;height: 60px;background-color: #eee;}.nav{width: 1000px;height: 60px;background-color: lightblue;margin: 0 auto;}.nav ul{list-style-type: none;background-color: pink;line-height: 60px;text-align: center;}.nav ul li{display: inline-block;padding: 0 50px;position: relative;}.nav ul li a{text-decoration: none;font-size: 20px;font-family: Arial, Helvetica, sans-serif;color: #fff;}.nav ul li ul{display: none;position: absolute;left: 0;text-align: center;line-height: 60px;}.nav ul li:hover ul{display: block;}.nav ul li ul li{width: 60px;padding: 0 20px;border-bottom: 2px solid transparent;}.nav ul li ul li:hover{border-bottom: 2px solid rgb(241, 159, 214);}.nav ul li ul li a{font-size: 20px;}.nav ul li ul li a:hover{color: rgb(241, 159, 214);}</style>
如果觉得《HTML+CSS - 导航栏下拉菜单》对你有帮助，请点赞、收藏，并留下你的观点哦！
