CSS/JQuery实现二级菜单栏下滑

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{