用jQuery制作最简单的无限级下拉菜单方法 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    var menu = $('.menu');
    menu.hover(function(){
        $(this).children('ul').show();
    },function(){
        $(this).children('ul').hide();
    });
});
</script>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
body{margin: 50px;}
.hide{display: none;}
.menu{cursor: pointer;}
</style>
</head>
<body>

<ul>
    <li class="menuLevel1 menu">
        <span>一级菜单</span>
        <ul class="hide">
            <li class="menuLevel2 menu">
                <span>二级菜单</span>
                <ul class="hide">
                    <li class="menuLevel3 menu">
                        <span>三级菜单</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>




</body>
</html>

 

posted @ 2014-04-20 21:24  little fly  阅读(318)  评论(0)    收藏  举报