CSS实现方法
使用相对定位和绝对定位,先隐藏二级栏目,鼠标经过后设为可见,并结合css动画效果。
li{list-style: none;text-align:center; }
a{text-decoration: none;}
li.item{
position: relative;
width: 130px;
background: red;
}
ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
/* margin-left: -36px; */
width: 130px;
background:yellow;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-moz-transform: translateY(-10%);
-o-transform: translateY(-10%);
-ms-transform: translateY(-10%);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
li.item:hover ul{
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
<li class="item"><a href="">一级栏目</a>
<ul>
<li><a href="">二级栏目</a></li>
<li><a href="">二级栏目</a></li>
</ul>
</li>
效果如下:
JQuery实现方法
先将submenu隐藏,再用slideDown()和slideUp()这两个方法实现。
li{list-style: none; width: 130px;text-align: center;}
a{text-decoration: none;}
li.item{background-color: red;}
.submenu{display: none;padding: 0;margin:0;background-color: yellow;}
.submenu li{padding: 0;display: block;}
.submenu li:hover{background-color: green;}
<li class="item"><a href="">一级栏目</a>
<ul class="submenu">
<li><a href="">二级栏目</a></li>
<li><a href="">二级栏目</a></li>
</ul>
</li>
$(function(){
$("li.item").hover(function() {
$(this).find('.submenu').stop(true,true).slideDown();
}, function() {
$(this).find('.submenu').stop(true,true).slideUp();
});
})
效果和css类似,但用jquery实现代码相对简单易懂,呈现的效果更好!