三级按钮菜单

<style type="text/css">
            .main_l{ width:138px; height:auto; padding:20px 0px 22px 0px;  float:left; background:url(i/left_bg2.gif) no-repeat bottom left;}
            .main_l ul{ padding:0px; margin:0px; list-style:none;}
            .main_l ul li span, .main_l ul li span.open, .main_l ul li span.close{ width:122px; height:30px; background:url(i/li.gif); padding-left:16px; line-height:30px; display:block; cursor:pointer;}
            .main_l ul li span.open{background:url(i/li_2.gif);}
            .main_l ul li span.close{background:url(i/li_1.gif);}
            .main_l ul li ul{ padding:0px; margin:0px; list-style:none; display:none;}
            .main_l ul li ul li span, .main_l ul li ul li span.open, .main_l ul li ul li span.close{ width:111px; height:30px; background:url(i/li_li.gif); padding-left:27px; line-height:30px; display:block; cursor:pointer;}
            .main_l ul li ul li span.open{background:url(i/li_li_2.gif);}
            .main_l ul li ul li span.close{background:url(i/li_li_1.gif);}
            .main_l ul li ul li ul{ padding:0px; margin:0px; list-style:none; display:none;}
            .main_l ul li ul li ul li { width:138px; height:30px; background:url(i/li_li_li.gif);  line-height:30px; text-align:center; font-weight:bold; display:block; cursor:pointer;}
            .main_l ul li span a, .main_l ul li span a:hover, .main_l ul li a, .main_l ul li a:hover{ text-decoration:none; color:#333;}
        </style>
        
        <div class="main_l" id="menu">
            <ul>
                <li><span>首页</span></li>
                <li><span>推荐</span></li>
                <li><span>分类</span>
                    <ul>
                        <li><span>电子书推荐</span>
                            <ul>
                                <li>广告维护</li>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                        <li><span>促销专区</span></li>
                    </ul>
                    <ul>
                        <li><span>图书资讯</span></li>
                    </ul>
                </li>
                <li><span>搜索</span></li>
                <li><span>用户反馈</span></li>
                <li><span>购买申诉</span></li>
                <li><span>权限分配</span></li>
            </ul>
        </div>
        
        <script type="text/javascript">
            $(function(){
                //遍历整个树，有子元素的添加标记
                $("#menu ul li span").each(function(){ 
                    if($(this).siblings().length>0){
                            $(this).addClass("close");
                        }
                });
                //展开，关闭
                $("#menu ul li span").toggle(function(){
                        if($(this).siblings().length>0){
                            $(this).attr("class","open");
                            $(this).siblings().show();}
                        },function(){
                        if($(this).siblings().length>0){
                            $(this).attr("class","close");
                            $(this).siblings().hide();}
                        })
                })
        </script>