方法一:给列表项加相对定位，然后给下拉菜单加绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.list{
width: 500px;
/*让列表居中*/
margin: 0 auto;
/*如果加了overflow则下拉效果没有*/
/*overflow: hidden;*/
}
.list>li{
/*列表项靠左浮动*/
float: left;
/*给每个列表项定宽*/
width: 100px;
}
ul a{
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
padding: 10px 10px;
color: #fff;
background-color: #ccc;
}
.dropbtn{
/*给第三个列表项设置相对定位*/
position: relative;
}
.dropdown{
/*给下拉菜单设置绝对定位*/
position: absolute;
/*设置绝对定位后,列表项的宽度会改变*/
width: 100px;
/*隐藏下拉菜单*/
display: none;
}
.dropbtn:hover .dropdown{
display: block;
}
ul a:hover,
ul a:focus{
background-color: #333;
}
</style>
</head>
<body>
<nav>
<ul class="list">
<li><a href="/go.html?url=#">语文</a></li>
<li><a href="/go.html?url=#">数学</a></li>
<li class="dropbtn">
<a href="/go.html?url=#">英语</a>
<ul class="dropdown">
<li><a href="/go.html?url=#">过去</a></li>
<li><a href="/go.html?url=#">将来</a></li>
<li><a href="/go.html?url=#">现在</a></li>
</ul>
</li>
<li><a href="/go.html?url=#">物理</a></li>
<li><a href="/go.html?url=#">化学</a></li>
</ul>
</nav>
</body>
</html><!DOCTYPE html>
