首先要在页面引用jquery.js，版本不限；HTML代码如下：
jquery下拉菜单（导航）代码汇总下载
2016-11-28 16:34:26
css样式代码如下：
/**头部菜单**/.header_menu{float:right;width:50%;height:100%;cursor:pointer;}.header_menuul{list-style:none;height:100%;}.header_menuulli{float:right;width:20%;color:white;font-size:14px;padding-top:55px;font-weight:bold;}.display{display:none;}.displayul{list-style:none;width:100px;}.displayulli{padding-top:10px;padding-bottom:5px;padding-left:5px;cursor:pointer;font-size:14px;}.movediv{position:fixed;left:0px;top:0px;font-size:14px;white;border:1pxsolidwhite;}.redcolor{#a0c9e6;}
js脚本代码如下：
$(function(){//菜单绑定事件initMenuListener();//下拉菜单绑定事件initSubMenuHover();//下拉菜单颜色改变initSubMenuLiHover();});/***头部菜单绑定滑过事件*/functioninitMenuListener(){$(“.menuli”).hover(function(){varhideDivId=$(this).attr(“id”)+“_div”;//得到菜单的位置varleft=$(this).offset().left;vartop=$(this).offset().top;varheight=$(this).outerHeight();//outerHeight是获取高度，包括内边距，height是也是获取高度，不过只包括文本高度$(“#”+hideDivId).show();$(“#”+hideDivId).css(“left”,left);$(“#”+hideDivId).css(“top”,top+height);},function(){//将原来的菜单隐藏$(“.display”).hide();});}/***下拉菜单绑定事件*/functioninitSubMenuHover(){$(“.display”).hover(function(){$(this).show();},function(){$(this).hide();});}/***下拉菜单改变颜色*/functioninitSubMenuLiHover(){$(“.redli”).hover(function(){$(this).addClass(“redcolor”);},function(){$(this).removeClass(“redcolor”);});}
THE END