<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none; } .nav>li{ float: left; } ul a{ display: block; text-decoration: none; width: 100px; height: 50px; text-align: center; line-height: 50px; color: white; background-color: #2f3e45; } .nav>li:first-child a{ border-radius: 10px 0 0 10px; } .nav>li:last-child a{ border-radius: 0 10px 10px 0; } .drop-down{ /*position: relative;*/ } .drop-down-content{ padding: 0; display: none; /*position: absolute;*/ } h3{ font-size: 30px; clear: both; } .drop-down-content li:hover a{ background-color:red; } .nav .drop-down:hover .drop-down-content{ display: block; }</style></head><body> <ul class="nav"> <li><a href="#">下拉菜单</a></li> <li class="drop-down"><a href="#">下拉菜单</a> <ul class="drop-down-content"> <li><a href="#">我是1</a></li> <li><a href="#">我是2</a></li> <li><a href="#">我是3</a></li> </ul> </li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> <li><a href="#">下拉菜单</a></li> </ul> <h3>我是测试文字</h3></body></html>这是首先考虑到的实现方法，给 .drop-down-content 添加display:none，当悬浮在.drop-down上时 .drop-down-content的display变成block，缺点是不能添加过渡属性，慢慢弹出下来菜单。当.drop-down-content显示时会把后面的盒子往下挤，因为.drop-down-content 显示时是存在于文档流中的，给.drop-down设置position:relative，.drop-down-content设置position:absolute，使下拉菜单脱离了文档流来解决，上面注释的地方改过来即可