jQuery实现下拉菜单

HTML部分

<div class="menu">
    <ul>
        <li>
            <a href="#">一级菜单1</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">三级菜单1</a></li>
                <li><a href="#">四级菜单1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单2</a>
            <ul>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">三级菜单2</a></li>
                <li><a href="#">四级菜单2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单3</a>
            <ul>
                <li><a href="#">二级菜单3</a></li>
                <li><a href="#">三级菜单3</a></li>
                <li><a href="#">四级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS部分

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
.menu{
    width: 330px;
    height: 30px;
    padding-left: 10px;
    margin: 100px auto 0;
    background-color: blue;
}
.menu li{
    float: left;
    width: 100px;
    height: 30px;
    background-color: blue;
    margin-right:10px;
    position: relative;

}
.menu a{
    display: block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    color: #000;

}
.menu li ul{
    position: absolute;
    display: none;
}

jQuery部分

方法一：

$(document).ready(function () {
//          $(".menu li").mouseenter(function () {
//              $(this).children("ul").show();
//          }) ;
//           $(".menu li").mouseleave(function () {
//               $(this).children("ul").hide();
//           }) ;
//       });

方法二：

$(document).ready(function () {
//           var $li=$(".menu>ul>li");
//           $li.mouseenter(function () {
//                $(this).children("ul").show();
//            });
//            $li.mouseleave(function () {
//                $(this).children("ul").hide();
//            });
//        });

方法三：

 $(function () {
           $(".menu li").hover(function () {
               $(this).children("ul").slideToggle();
           }) ;
        });