jquery实现二级菜单

一种实现：

二级菜单在一级菜单中，采用JQuery实现

    

        

            

                衬衫
                

                    
短袖衬衫
                    
长袖衬衫
                    
短袖T恤
                    
长袖T恤
                
            
            

                卫衣
                

                    
开襟卫衣
                    
套头卫衣
                    
运动卫衣
                    
童装卫衣
                
            
            

                裤子
                

                    
短裤
                    
休闲裤
                    
牛仔裤
                    
免烫卡其裤
                
            
        
    
    

        
正常显示
        
正常显示
        
正常显示
        
正常显示
    

使用jQuery实现的

 $(function () {
            $(".box .menu>li").hover(function () {//实现一级菜单鼠标移动，二级菜单显示事件
                $(this).css("background", "green").find('.level2').show().parent().siblings().children('a').css("background", "").next().hide();
            },
            function () {
                $(this).css("background", "").find('.level2').hide();
            }
            );
        });

二、二级菜单单独放在其他地方

    

        

            

                衬衫
            
            

                卫衣

            
            

                裤子
            
        
    

    

        
正常显示
        
正常显示
        
正常显示
        
正常显示
    
    

        

            
短袖衬衫
            
长袖衬衫
            
短袖T恤
            
长袖T恤
        
        

            
短裤
            
休闲裤
            
牛仔裤
            
免烫卡其裤
        
        

            
开襟卫衣
            
套头卫衣
            
运动卫衣
            
童装卫衣
        
    

jQuery实现

        $(function () {
            $(".box .menu1>li").hover(function () {//实现一级菜单鼠标移动、二级菜单插入事件
                var $level = $('.level>.level2').eq($(this).index()).clone();
                $(this).css("background", "green").append($level).parent().siblings().children('a').css("background", "");
            },
            function () {
                $(this).css("background", "").find('.level2').remove();
            }
            );
        });