三级导航带跟踪浮动-白红宇

三级导航带跟踪浮动
阅读量：7122 次
发布时间：2019-06-28
本文共 7201 字，大约阅读时间需要 24 分钟。

    
    
     
      $(function(){    $('#zdf_nav li').hover(function(){        $(this).children('ul').stop(true,true).show('slow');    },function(){        $(this).children('ul').stop(true,true).hide('slow');    });        $('#zdf_nav li').hover(function(){        $(this).children('div').stop(true,true).show('slow');    },function(){        $(this).children('div').stop(true,true).hide('slow');    });});
      
       * {margin:0;padding:0;}body {    height:1000px;/*height:1000px;*/    font-family:Arial, Verdana, Helvetica, sans-serif;    font-family:"雅黑宋体", "微软雅黑", "新宋体", "宋体";    /*font-size:1em;*/    /*font-size:17px;*/    /*color:#FFF;*/    /*background:#050505;*/    text-align:left;}ul {list-style:none;}#zdf_nav {margin:0 auto;width:960px;height:37px;background:#333;font-size:14px;text-align:center;    position:relative; /*导航跟踪浮动*/    z-index:999999;}#zdf_nav a {color:#FFF;    text-decoration:none;font-size:14px;}/*#zdf_nav .hover,#zdf_nav a:hover{background:#000;border-top:1px solid #000;border-left:1px solid #000;color:#fff;}*/#zdf_nav .hover{background:#000;border-top:1px solid #000;border-left:1px solid #000;color:#fff;}#zdf_nav01{color:#fff; background:none; border:none;}#zdf_nav02{color:#fff; background:none; border:none;}#zdf_nav03{color:#fff; background:none; border:none;}#zdf_nav04{color:#fff; background:none; border:none;}#zdf_nav05{color:#fff; background:none; border:none;}#zdf_nav06{color:#fff; background:none; border:none;}#zdf_nav07{color:#fff; background:none; border:none;}#zdf_nav08{color:#fff; background:none; border:none;}#zdf_nav09{color:#fff; background:none; border:none;}#zdf_nav010{color:#fff; background:none; border:none;}#zdf_nav em{width:1px;display:block;height:37px;float:left;overflow:hidden;}#zdf_nav em{border-right:1px solid #4a4a4a;background:#333;}#zdf_nav li ul {display:none;}#zdf_nav li ul li {float:none;}*html #zdf_nav li ul li {display:inline;}#zdf_nav li ul a {float:none;height:32px;line-height:32px;padding:0 10px;text-transform:capitalize;}#zdf_nav .height-auto {line-height:15px;padding:5px 10px;}.second-menu, .third-menu, .fourth-menu {position:absolute;}.first-menu li {float:left;    position:relative;}.first-menu a {    float:left; display:block;padding:0 18px;height:35px;line-height:35px;background:#333;font-size:14px;border-top:1px solid #4a4a4a;border-left:1px solid #4a4a4a;border-bottom:1px solid #242424;border-right:1px solid #242424;}.first-menu a:hover {background:#4698ca;border-top:1px solid #5db1e0;border-left:1px solid #5db1e0;}.second-menu {top:37px;right:0;}*html .second-menu {right:-1px;}.second-menu a {font-size:12px;}.second-menu a.zdf {background:#3a3a3a url(http://www.jinggong.com/v2014/images/zdf.png) no-repeat;}.second-menu a.zdf:hover {background:#4698ca url(http://www.jinggong.com/v2014/images/zdf.png) no-repeat;}.second-menu a.zdf-02 {background:#3a3a3a url(http://www.jinggong.com/v2014/images/zdf.png) no-repeat;}.second-menu a.zdf-02:hover {background:#4698ca url(http://www.jinggong.com/v2014/images/zdf.png) no-repeat;}.third-menu, .fourth-menu {    width:164px; /*177px*/    top:0;    left:164px; /*177px*/}.third-menu a {    background:#4c4c4c;    font-weight:normal;    border-top:1px solid #595959;border-left:1px solid #595959;    border-bottom:1px solid #333;border-right:1px solid #333;}#subMgm {width:164px;/*177px*/}#subMgm .third-menu {left:164px;/*177px*/}#subMgm .fourth-menu {left:164px;/*177px*/}#subMusic, #subNews {width:164px;/*177px*/}
       
       
            
        
               
         
          
           网站首页
          
               
         
          
           走进精功        
           
                      
           
          
         
          
           公司简介
          
          
         
          
           精功记事
          
          
         
          
           组织架构
          
          
         
          
           注册商标
          
          
         
          
           公司荣誉
          
          
         
          
           精功文化
          
          
         
          
           经营理念
          
          
         
          
           高薪诚聘            
           
                            
           
          
         
          
           人才战略
          
                
         
          
           招聘信息
          
                
         
          
           校园招聘
          
                
         
          
           求职申请
          
                                
         
          
           专业作业
          
          
         
          
           精功工厂
          
          
         
          
           公益事业
          
          
         
          
           联盟商家
          
          
         
          
           服务投诉
          
          
         
          
           联系我们
          
              
               
         
          
           新闻资讯        
           
                      
           
          
         
          
           公司新闻          
          
          
         
          
           签约开业            
           
                                  
           
          
          
         
          
           行业资讯            
           
                                  
           
          
          
         
          
           护眼教室            
           
                          
           
          
         
          
           眼镜常识
          
              
         
          
           视力保健
          
              
         
          
           自我检查
          
              
         
          
           饮食疗法
          
              
         
          
           配镜指南
          
                                    
               
         
          
           招商加盟        
           
                      
           
          
         
          
           行业前景
          
          
         
          
           加盟优势
          
          
         
          
           加盟分类
          
          
         
          
           加盟条件
          
          
         
          
           加盟流程
          
          
         
          
           加盟支持
          
          
         
          
           常见问题
          
          
         
          
           寻求合作
          
          
         
          
           精功手册
          
          
         
          
           加盟手册
          
          
         
          
           最新加盟
          
          
         
          
           在线咨询
          
          
         
          
           在线申请
          
              
               
         
          
           产品中心        
           
                      
           
          
         
          
           框架眼镜
          
          
         
          
           眼镜镜片
          
          
         
          
           太阳眼镜
          
          
         
          
           隐形眼镜
          
               
               
         
          
           精功商城        
           
                      
           
          
         
          
           框架眼镜
          
          
         
          
           眼镜镜片
          
          
         
          
           太阳眼镜
          
          
         
          
           隐形眼镜
          
           
         
          
           在线试戴
          
          
         
          
           天猫商城
          
                 
               
         
          
           模特大赛        
           
                        
           
          
         
          
           赛事介绍
          
            
         
          
           赛事资讯              
           
                            
           
          
         
          
           官方公告
          
                
         
          
           最新动态
          
                
         
          
           媒体报道
          
                                      
         
          
           历届大赛                
           
                                
           
          
         
          
           2013
          
                    
         
          
           2012
          
                    
         
          
           2011
          
                    
         
          
           2010
          
                    
         
          
           2009
          
                    
         
          
           2008
          
                    
         
          
           2007
          
                                        
         
          
           大赛选手
          
            
         
          
           高清图集
          
            
         
          
           视频花絮
          
            
         
          
           合作伙伴
          
            
         
          
           我要报名
          
               
               
         
          
           文化传媒        
           
                        
           
          
         
          
           新闻资讯              
           
                            
           
          
         
          
           官方公告
          
                
         
          
           最新动态
          
                                      
         
          
           宣传手册
          
            
         
          
           模特大赛                
           
                                
           
          
         
          
           2013
          
                    
         
          
           2012
          
                    
         
          
           2011
          
                    
         
          
           2010
          
                    
         
          
           2009
          
                    
         
          
           2008
          
                    
         
          
           2007
          
                                        
         
          
           模特资源
          
            
         
          
           模特培训
          
            
         
          
           舞美工程
          
            
         
          
           项目案例              
           
                              
           
          
         
          
           项目招商
          
                  
         
          
           项目洽谈
          
                  
         
          
           成功案例
          
                          
         
          
           服装租赁              
           
                              
           
          
         
          
           活力装
          
                  
         
          
           晚装
          
                  
         
          
           泳装
          
                                      
         
          
           联系我们
          
               
               
         
          
           视光学校        
           
                        
           
          
         
          
           学校介绍
          
            
         
          
           教学环境
          
            
         
          
           师资介绍
          
            
         
          
           专业介绍
          
            
         
          
           验光教程
          
            
         
          
           招生简章
          
            
         
          
           网上报名
          
              
               
         
          
           装修工程        
           
                        
           
          
         
          
           装修流程
          
            
         
          
           门店平面图
          
            
         
          
           门店效果图
          
            
         
          
           门店现场图
          
                  
        
       
       
        //2014-02-13 var n = document.getElementById('zdf_nav').offsetTop;  window.onscroll = function() {  	var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;   	document.getElementById('zdf_nav').style.top = scroll_top > n ? scroll_top - n + 'px' : 0;  }