jquery导航栏

html

<ul class="list">
　　<li>下拉菜单
　　　　<ul class="nav">
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　</ul>
　　</li>
　　<li>下拉菜单
　　　　<ul class="nav">
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　</ul>
　　</li>
　　<li>下拉菜单
　　　　<ul class="nav">
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　</ul>
　　</li>
　　<li>下拉菜单
　　　　<ul class="nav">
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　</ul>
　　</li>
　　<li>下拉菜单
　　　　<ul class="nav">
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　　　<li>下拉菜单1</li>
　　　　</ul>
　　</li>
</ul>

css

*{margin:0;padding:0;}
.list{width:500px;height:30px;line-height:30px;list-style-type:none;margin:50px auto;color:#fff;}
.list li{width:100px;height:30px;text-align:center;float:left;font-size:14px;background:#333;cursor:pointer}

js

<script type="text/javascript">
/**全局的
(function($){
$.fn.extend({
"nav":function(){
$(".nav").css({
"list-style-type":"none",
"margin":0,
"padding":0,
"display":"none"
});
$(this).find(".nav").parent().mouseover(function(){
$(this).find(".nav").slideDown("normal")
});
$(this).find(".nav").parent().mouseout(function(){
$(this).find(".nav").stop().slideUp("normal")
})
}


})
})(jQuery);


$(function(){
$(".list").eq(0).nav();
})
**/
//局部的
(function($){
$.extend({
"nav":function(color){
$(".nav").css({
"list-style-type":"none",
"margin":0,
"padding":0,
"display":"none",
"color":color
});
$(".nav").parent().mouseover(function(){
$(this).find(".nav").slideDown("normal")
});
$(".nav").parent().mouseout(function(){
$(this).find(".nav").stop().slideUp("normal")
})
}


})
})(jQuery);


$(function(){
$.nav("blue");
})
</script>