下拉菜单

Demo :  /> drowDownMenu.rar
实现方法：

1.css实现

先把二级菜单隐藏,当鼠标经过一级菜单li时让二级菜单ul显示

ul li ul{
    display: none; /*先把二级菜单隐藏*/
}
ul li:hover ul{
    display: block; /*当鼠标经过一级菜单时二级菜单显示*/
}

2.js实现

可以用mouseover，mouseout添加事件，也可以用hover来添加事件;显示和隐藏可以用css改变样式,可以用show(),hide(),可以用toggle()

// 方法一：
$(function(){
    $('#nav ul li').mouseover(function(){
        $(this).children('ul').css("display","block");
    });
    $('#nav ul li').mouseout(function(){
        $(this).children('ul').css("display","none");
    });
});


// 方法二：
$(function(){
    $('#nav ul li').mouseover(function(){
        $(this).children('ul').show();
    });
    $('#nav ul li').mouseout(function(){
        $(this).children('ul').hide();
    });
});


// 方法三：
$(function(){
    $('#nav ul li').hover(
        function(){
            $(this).children('ul').show();
        },
        function(){
            $(this).children('ul').hide();
        })
})

//方法四
$(function(){
    $('#nav ul li').hover(
        function(){
            $(this).children('ul').toggle();
        })
})

//方法五
$(function(){
$('.#nav ul li').hover(function(){
    $(this).find('ul').slideDown("1000");
    },function(){
    $(this).find('ul').slideUp("fast");
    });
})