方法1：display:none和display:block切换
<!DOCTYPE html>
<html>
<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>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a>
<ul>
<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，使下拉菜单脱离了文档流来解决，上面注释的地方改过来即可
方法2：给下拉菜单设置固定的高度，下拉菜单的内容设置透明opacity: 0;，悬浮在下拉菜单时opacity: 1;来实现
<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;*/
height: 50px;
}
.drop-down-content{
padding: 0;
opacity: 0;
/*position: absolute;*/
}
h3{
font-size: 30px;
clear: both;
/* position: relative;
z-index: -1;*/
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
opacity: 1;
}
</style>效果同上。
方法3：设置包裹下拉菜单的li元素position:relation;下拉菜单绝对定位，left：-999px;使下拉菜单跑到左边浏览器外面看不到的地方，悬浮时，left:0;使其出现在浏览器中显示。
<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;
position: absolute;
left: -999px;
}
h3{
font-size: 30px;
clear: both;
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
left: 0;
}
</style>
方法4：使用绝对定位
/*HTML结构，以下四种方法通用*/
<div id="container">
<ul id="con_ul" class="cleanfix">
<li>首页</li>
<li>关于我们</li>
<li>
新闻中心
<ul id="drop">
<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>苏宁产业</li>
<li>社会责任</li>
<li>联系我们</li>
</ul>
</div>/*主要css代码（其他部分和上边一样）*/
#con_ul > li{
float: left;
height: 50px;
width:100px;
line-height: 50px;
text-align: center;
position: relative;
}
#drop{
width: 120px;
height:auto;
position: absolute;
left:-800px;
}
#con_ul > li:nth-child(3):hover #drop{
left:auto;
}分析：首先给下拉菜单的父元素li设置一个relative的position，将下拉菜单整体进行绝对定位，left为负值将下拉菜单偏出html结构显现不出来，之后在hover伪类中将left设置为auto，鼠标移动到li时会使下拉菜单与同级元素进行自动定位达到左端对齐的效果。（left：0也可以。）
更多web前端开发知识，请查阅 HTML中文网 ！！
