下拉菜单
<li class="chan">
<a href="product.html">产品中心
<img src="images/sanjiao.jpg"></a>
<ul class="nav_2">
<li><a href="#">产品分类1</li>
<li><a href="#">产品分类1</li>
<li><a href="#">产品分类1</li>
<li><a href="#">产品分类1</li>
</ul>
</li>
.chan {
position: relative;
}
.nav_2{
position: absolute;
margin-left: -30px;
top: 38px;
overflow:hidden;
height: 0;
background-color: rgba(255,255,255,0.5);
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
width: 120px;
box-shadow: 0 5px 5px #999;
}
.nav_2 li{
border-bottom:1px solid #dbdbdb;
width: 100px;
display: block;
height:40px;
line-height:40px;
font-size: 14px;
text-align: center;
}
.nav_2 li a:first-child{
margin-top: 10px;
}
.chan:hover .nav_2{
display:block;
height:163px;
}
也可以
<li class="chan">
<a href="product.html">产品中心
<img src="images/sanjiao.jpg"></a>
<dl class="nav_2"><dd><a href="http://jiuyi.lejuxx.com/index.php/Home/News/product/cat_id/4">保健食品</a></dd>
<dd><a href="http://jiuyi.lejuxx.com/index.php/Home/News/product/cat_id/5">电子产品</a></dd>
<dd><a href="http://jiuyi.lejuxx.com/index.php/Home/News/product/cat_id/6">床上用品</a></dd>
<dd><a href="http://jiuyi.lejuxx.com/index.php/Home/News/product/cat_id/7">生活用品</a></dd>
</dl>
.chan{
position: relative;
}
.nav_2{
position: absolute;
margin-left: -30px;
top: 38px;
overflow:hidden;
height: 0;
background-color: rgba(255,255,255,0.5);
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
width: 120px;
box-shadow: 0 5px 5px #999;
}
.nav_2 dd {
border-bottom:1px solid #dbdbdb;
display:block;
width: 100px;
text-align:center;
height:40px;
line-height:40px;
font-size: 14px;
text-align: center;
}
.nav_2 li a:first-child{
margin-top: 10px;
}
.chan:hover .nav_2{
display:block;
height:163px;
}