HTML+css+jQuery实现导航栏效果--pc端（内附详细说明）

先上html代码（有不懂的可以在下方评论留言）

    
    
    
    
    
      




    

        
        

            
首页
            

                走进城投
                

                    
集团简介
                    
组织机构
                    
城投文化
                    

                
            
            

                城投业务
                

                    
城投业务
                    
城市基础设施建设
                    

                
            
            

                党政建设
                

                    
企业党建
                    
纪检监察
                    
群团动态
                    

                
            
            

                城投动态
                

                    
集团要闻
                    
视频新闻
                    

                
            
            

                联系我们
                

                    
人才招聘
                    
联系方式
                    
互动服务
                    

                
            
            

        
        

    



    

css代码

下面就是jQuery代码部分了

// 导航
$(function(){
    // 鼠标移入事件
    $('.nav>li').mousemove(function(){
        $(this).addClass('active').siblings('li').removeClass('active') // 为li添加名为active的class，并移除兄弟元素（li）上的名为active的class名
        $(this).children('.level').css("display","block");  //  使li的子元素level显示
    })
    // 鼠标移出事件
    $('.nav>li').mouseleave(function(){
        $(this).children('.level').css("display","none");  //使li的子元素level显示
    })
})

$(this).children('.level').css("display","block");

这样显示出来会显得比较生硬，改为

$(this).children('.level').show();

后可以使显示增加一些效果，（）中可以设置过渡时间，以毫秒为单位，比如

$(this).children('.level').show(200);  // 过渡时间为200毫秒   1000毫秒等于1秒

整体效果如下图

源码下载