css如何实现下拉菜单？
方法1：使用display属性控制二级下拉菜单的显示与否
/*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:hover{
background-color: blue;
}
#drop{
display: none;
width: 120px;
height:auto;
}
#drop > li{
height: 30px;
line-height: 30px;
background-color: gray;
list-style: none;
text-align: left;
padding-left: 20px;
}
#drop > li a{
color: white;
text-decoration: none;
}
#con_ul > li:nth-child(3):hover #drop{
display: block;
}
实现结果如图所示；嵌套在父元素li中的ul下拉菜单在调整好样式之后设置display：none；表示盒子框的样式为不显示。在伪类样式中添加display:block，表示当鼠标移动到此li上时，下拉菜单以block的形式进行显示。这就达到了下拉菜单的显示效果。
方法2：使用opacity控制二级下拉菜单的显示与否
#drop{
width: 120px;
height:auto;
opacity: 0;
}
#con_ul > li:nth-child(3):hover #drop{
opacity: 1;
}分析：和改变display相类似，首先设计好样式之后为元素添加透明度为0，设置透明状态，在伪类中添加透明度opacity：1；即可将显示出下拉菜单。
方法3：使用绝对定位
/*主要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也可以。）
方法4：下拉菜单height设置为0
/*部分主要代码*/
#con_ul > li{
float: left;
height: 50px;
width:100px;
line-height: 50px;
text-align: center;
}
#drop{
width: 120px;
height:0;
overflow: hidden;
}
#con_ul > li:nth-child(3):hover #drop{
height: 150px; /*height: auto;*/
}
简单的画了一个图来解释一下：在上边的代码中li的高度为50px，而标题中的内容的行高line-height也设置为50px。父元素的高度已经固定，并且被标题内容“新闻中心”填满。所以此时下拉菜单的显示原理为溢出父容器li。首先将下拉菜单的高度height设置为0px；并且增加overflow：hidden；此时下拉菜单被隐藏起来。在hover伪类中添加height：auto或者是固定高度；即可将下拉菜单在鼠标移动过去时显示出来。
注意：有几个重点
1：要明白当父容器的height为显式高度时此时下拉菜单的显示原理为溢出父容器；
2：因为下拉菜单的height要设置为0px，所以一定要加上overflow：hidden；
3：在伪类中使用height：auto和height：显式高度，在添加过渡效果的时候会产生不一样的渲染效果。
总结
1：display属性和opacity属性相对简单；
2：使用绝对定位要对直接父元素进行相对定位；
3：下拉菜单父元素的高度是auto还是显式高度，他两种的实现原理是截然不同的。
4：注意总结方法，注意不同的场景，加油！
更多web前端知识，请查阅 HTML中文网 ！！
