该文章属于原创：转载注明出处：

Jquery 是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能；

首先肯定要在页面引用jquery.js  版本不限 ；

接下来把=====================html贴出来：

      
        
       
            
        
系统管理
            
        
干管所勤
            
        
保护站
            
        
木材检验
            
        
森林管护
        
       
    
      
      
    
       
        
        
出勤管理
        
        
巡视管理
        
        
现场取证
        
        
问题处置
    
       
      
      
    
       
        
        
位置监测
        
        
检验管理
    
       
      
      
    
       
        
        
出勤管理
        
        
监管信息
    
       
      
      
    
       
        
        
出勤管理
        
        
监管信息
    
       
      
      
    
       
        
        
权限管理
        
        
设备管理
    
       
      

===========================css样式：

/**头部菜单**/.header_menu{    float:right;    width: 50%;    height: 100%;    cursor: pointer;    }.header_menu ul{    list-style: none;    height: 100%;}.header_menu ul li{    float: right;    width: 20%;    color:white;    font-size:14px;    padding-top: 55px;    font-weight: bold;}.display{    display: none;}.display ul{    list-style: none;    width: 100px;}.display ul li{    padding-top:10px;    padding-bottom: 5px;    padding-left:5px;    cursor: pointer;    font-size: 14px;}.movediv{    position: fixed;    left: 0px;    top:0px;    font-size: 14px;    background-color: white;    border:1px solid white;}.redcolor{    background-color: #a0c9e6;}

=======================js脚本

$(function() {    // 菜单绑定事件    initMenuListener();    // 下拉菜单绑定事件    initSubMenuHover();    // 下拉菜单颜色改变    initSubMenuLiHover();});/** * 头部菜单绑定滑过事件 */function initMenuListener() {    $(“.menuli”).hover(function() {        var hideDivId = $(this).attr(“id”) + “_div”;        // 得到菜单的位置        var left = $(this).offset().left;        var top = $(this).offset().top;        var height = $(this).outerHeight();//outerHeight是获取高度，包括内边距，height是也是获取高度，不过只包括文本高度        $(“#” + hideDivId).show();        $(“#” + hideDivId).css(“left”, left);        $(“#” + hideDivId).css(“top”, top + height);    }, function() {        // 将原来的菜单隐藏        $(“.display”).hide();    });}/** * 下拉菜单绑定事件 */function initSubMenuHover() {    $(“.display”).hover(function() {        $(this).show();    }, function() {        $(this).hide();    });}/** *  下拉菜单改变颜色 */function initSubMenuLiHover() {    $(“.redli”).hover(function() {        $(this).addClass(“redcolor”);    }, function() {        $(this).removeClass(“redcolor”);    });}

效果如下：