三级导航带跟踪浮动

<!--导航-->
<script type="text/javascript" src="http://www.jinggong.com/v2014/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(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');
});
});
</script>
<style type="text/css">
* {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:1
3ff0
px 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*/}
</style>
<!--三级导航-->
<div>
<ul id="zdf_nav" class="first-menu">
<li><a id="nav01" href="http://www.jinggong.com/" target="_self">网站首页</a></li><em></em>
<li><a id="nav02" href="http://www.jinggong.com/about-us.aspx"  target="_self" title="关于精功|关于我们">走进精功</a>
<ul id="subNews" class="second-menu">
<li><a href="http://www.jinggong.com/about-us.aspx" target="_self">公司简介</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=96" target="_self" title="发展历程">精功记事</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=97" target="_self">组织架构</a></li>
<li><a href="http://www.jinggong.com/trademark_2014.aspx" target="_self">注册商标</a></li>
<li><a href="http://www.jinggong.com/honors.aspx" target="_self">公司荣誉</a></li>
<li><a href="http://www.jinggong.com/culture_2014.aspx" target="_self">精功文化</a></li>
<li><a href="http://www.jinggong.com/manage.aspx" target="_self">经营理念</a></li>
<li><a href="http://www.jinggong.com/job.aspx" class="zdf" target="_self" title="人才招聘">高薪诚聘</a>
<ul class="third-menu">
<li><a href="http://www.jinggong.com/talent-strategy_2014.aspx" target="_self">人才战略</a></li>
<li><a href="http://www.jinggong.com/job_2014.aspx" target="_self">招聘信息</a></li>
<li><a href="http://www.jinggong.com/2014school_2014.aspx" target="_self">校园招聘</a></li>
<li><a href="http://www.jinggong.com/applying_2014.aspx" target="_self">求职申请</a></li>
</ul>
</li>
<li><a href="http://www.jinggong.com/zhuangye_2014.aspx" target="_self">专业作业</a></li>
<li><a href="http://www.jinggong.com/factory_2014.aspx" target="_self">精功工厂</a></li>
<li><a href="http://www.jinggong.com/commonweal_2014.aspx" target="_self">公益事业</a></li>
<li><a href="http://www.jinggong.com/union-business_2014.aspx" target="_self">联盟商家</a></li>
<li><a href="http://www.jinggong.com/complaint_2014.aspx" target="_self">服务投诉</a></li>
<li><a href="http://www.jinggong.com/contact-us_2014.aspx" target="_self">联系我们</a></li>
</ul>
</li><em></em>
<li><a id="nav03" href="http://www.jinggong.com/news-list_2014.aspx" target="_self">新闻资讯</a>
<ul style="display: none;" id="subMusic" class="second-menu">
<li><a href="http://www.jinggong.com/news-list_2014.aspx?typeid=3"  target="_self" title="公司动态|商城动态|大赛动态">公司新闻</a>
</li>
<li><a href="http://www.jinggong.com/news-list_2014.aspx?typeid=43"  target="_self">签约开业</a>
<ul class="third-menu">
</ul>
</li>
<li><a href="http://www.jinggong.com/news-list_2014.aspx?typeid=10"  target="_self">行业资讯</a>
<ul class="third-menu">
</ul>
</li>
<li><a href="http://www.jinggong.com/gobe_2014.aspx" class="zdf" target="_self" title="眼镜百科|眼镜知识">护眼教室</a>
<ul class="third-menu">
<li><a href="http://www.jinggong.com/gobe_2014.aspx?typeid=23" target="_self">眼镜常识</a></li>
<li><a href="http://www.jinggong.com/gobe_2014.aspx?typeid=24" target="_self">视力保健</a></li>
<li><a href="http://www.jinggong.com/gobe_2014.aspx?typeid=25" target="_self">自我检查</a></li>
<li><a href="http://www.jinggong.com/gobe_2014.aspx?typeid=26" target="_self">饮食疗法</a></li>
<li><a href="http://www.jinggong.com/gobe_2014.aspx?typeid=27" target="_self">配镜指南</a></li>
</ul>
</li>
</ul>
</li><em></em>
<li><a id="nav05" href="http://www.jinggong.com/join/" target="_self">招商加盟</a>
<ul id="subNews" class="second-menu">
<li><a href="http://www.jinggong.com/join-news.aspx?id=27"  target="_self">行业前景</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=26"  target="_self">加盟优势</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=25"  target="_self">加盟分类</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=24"  target="_self">加盟条件</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=94"  target="_self">加盟流程</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=23"  target="_self">加盟支持</a></li>
<li><a href="http://www.jinggong.com/join-news.aspx?id=22"  target="_self">常见问题</a></li>
<li><a href="http://www.jinggong.com/hezuo_2014.aspx"  target="_self">寻求合作</a></li>
<li><a href="http://www.jinggong.com/manual/jinggong/2014/"  target="_blank">精功手册</a></li>
<li><a href="http://www.jinggong.com/manual/join/2013/"  target="_blank">加盟手册</a></li>
<li><a href="#"  target="_self">最新加盟</a></li>
<li><a href="http://www.jinggong.com/join/message_2014.aspx"  target="_self">在线咨询</a></li>
<li><a href="http://www.jinggong.com/join/join_2014.aspx"  target="_self">在线申请</a></li>
</ul>
</li><em></em>
<li><a id="nav04" href="#"  target="_self">产品中心</a>
<ul id="subNews" class="second-menu">
<li><a href="http://www.jinggong.com.cn/frames.html"  target="_blank">框架眼镜</a></li>
<li><a href="http://www.jinggong.com.cn/gasseslens.html"  target="_blank">眼镜镜片</a></li>
<li><a href="http://www.jinggong.com.cn/sunglasses.html"  target="_blank">太阳眼镜</a></li>
<li><a href="http://www.jinggong.com.cn/yinxing.html"  target="_blank">隐形眼镜</a></li>
</ul>
</li><em></em>
<li><a id="nav04" href="http://www.jinggong.com.cn/"  target="_blank">精功商城</a>
<ul id="subNews" class="second-menu">
<li><a href="http://www.jinggong.com.cn/frames.html"  target="_blank">框架眼镜</a></li>
<li><a href="http://www.jinggong.com.cn/gasseslens.html"  target="_blank">眼镜镜片</a></li>
<li><a href="http://www.jinggong.com.cn/sunglasses.html"  target="_blank">太阳眼镜</a></li>
<li><a href="http://www.jinggong.com.cn/yinxing.html"  target="_blank">隐形眼镜</a></li>
<li><a href="http://www.jinggong.com.cn/shidai.html"  target="_blank">在线试戴</a></li>
<li><a href="http://jgyj.tmall.com/"  target="_blank">天猫商城</a></li>
</ul>
</li><em></em>
<li><a id="nav06" href="http://model.jinggong.com/"  target="_blank">模特大赛</a>
<ul id="subNews" class="second-menu">
<li><a href="http://model.jinggong.com/news-detail.aspx?IDX=1"  target="_blank">赛事介绍</a></li>
<li><a href="http://model.jinggong.com/news-list.aspx?ColumnIDX=1" class="zdf" target="_blank">赛事资讯</a>
<ul class="third-menu">
<li><a href="http://model.jinggong.com/news-list.aspx?ColumnIDX=3" target="_blank">官方公告</a></li>
<li><a href="http://model.jinggong.com/news-list.aspx?ColumnIDX=1" target="_blank">最新动态</a></li>
<li><a href="http://model.jinggong.com/news-list.aspx?ColumnIDX=2" target=
3ff0
"_blank">媒体报道</a></li>
</ul>
</li>
<li><a href="#"  class="zdf" target="_blank">历届大赛</a>
<ul class="third-menu">
<li><a href="http://www.jinggong.com/2013/" target="_blank">2013</a></li>
<li><a href="http://www.jinggong.com/2012/" target="_blank">2012</a></li>
<li><a href="http://www.jinggong.com/2011/" target="_blank">2011</a></li>
<li><a href="http://www.jinggong.com/2010/" target="_blank">2010</a></li>
<li><a href="http://www.jinggong.com/2009/" target="_blank">2009</a></li>
<li><a href="http://www.jinggong.com/2008/" target="_blank">2008</a></li>
<li><a href="http://www.jinggong.com/2007/" target="_blank">2007</a></li>
</ul>
</li>
<li><a href="http://model.jinggong.com/image-center.aspx"  target="_blank">大赛选手</a></li>
<li><a href="http://model.jinggong.com/EventImages.aspx"  target="_blank">高清图集</a></li>
<li><a href="http://model.jinggong.com/video-page.aspx"  target="_blank">视频花絮</a></li>
<li><a href="http://model.jinggong.com/Default.aspx#hezuomeiti"  target="_blank">合作伙伴</a></li>
<li><a href="http://media.jinggong.com/baoming.aspx"  target="_blank">我要报名</a></li>
</ul>
</li><em></em>
<li><a id="nav09" href="http://media.jinggong.com/"  target="_blank">文化传媒</a>
<ul id="subNews" class="second-menu">
<li><a href="http://media.jinggong.com/news-list.aspx?typeid=6" class="zdf" target="_blank">新闻资讯</a>
<ul class="third-menu">
<li><a href="http://media.jinggong.com/news-list.aspx?typeid=6" target="_blank">官方公告</a></li>
<li><a href="http://media.jinggong.com/news-list.aspx?typeid=11" target="_blank">最新动态</a></li>
</ul>
</li>
<li><a href="http://www.jinggong.com/manual/model/2014/"  target="_blank">宣传手册</a></li>
<li><a href="http://model.jinggong.com/" class="zdf" target="_blank">模特大赛</a>
<ul class="third-menu">
<li><a href="http://www.jinggong.com/2013/" target="_blank">2013</a></li>
<li><a href="http://www.jinggong.com/2012/" target="_blank">2012</a></li>
<li><a href="http://www.jinggong.com/2011/" target="_blank">2011</a></li>
<li><a href="http://www.jinggong.com/2010/" target="_blank">2010</a></li>
<li><a href="http://www.jinggong.com/2009/" target="_blank">2009</a></li>
<li><a href="http://www.jinggong.com/2008/" target="_blank">2008</a></li>
<li><a href="http://www.jinggong.com/2007/" target="_blank">2007</a></li>
</ul>
</li>
<li><a href="http://media.jinggong.com/model.aspx"  target="_blank">模特资源</a></li>
<li><a href="http://media.jinggong.com/peixun.aspx"  target="_blank">模特培训</a></li>
<li><a href="http://media.jinggong.com/wutai.aspx"  target="_blank">舞美工程</a></li>
<li><a href="http://media.jinggong.com/investment.aspx" class="zdf" target="_blank">项目案例</a>
<ul class="third-menu">
<li><a href="http://media.jinggong.com/investment.aspx" target="_blank">项目招商</a></li>
<li><a href="http://media.jinggong.com/case-list.aspx?typeid=19" target="_blank">项目洽谈</a></li>
<li><a href="http://media.jinggong.com/case-list.aspx?typeid=20" target="_blank">成功案例</a></li>
</ul></li>
<li><a href="http://media.jinggong.com/fuzhuang.aspx" class="zdf" target="_blank">服装租赁</a>
<ul class="third-menu">
<li><a href="http://media.jinggong.com/fuzhuang.aspx?typeid=2" target="_blank">活力装</a></li>
<li><a href="http://media.jinggong.com/fuzhuang.aspx?typeid=16" target="_blank">晚装</a></li>
<li><a href="http://media.jinggong.com/fuzhuang.aspx?typeid=17" target="_blank">泳装</a></li>
</ul>
</li>
<li><a href="http://media.jinggong.com/contact-us.aspx"  target="_self">联系我们</a></li>
</ul>
</li><em></em>
<li><a id="nav08" href="http://www.jinggong.com/zhaosheng_2014.aspx"  target="_self" title="精功学校">视光学校</a>
<ul id="subNews" class="second-menu">
<li><a href="http://www.jinggong.com/zhaosheng_2014.aspx"  target="_self">学校介绍</a></li>
<li><a href="http://www.jinggong.com/huajing_2014.aspx"  target="_self">教学环境</a></li>
<li><a href="http://www.jinggong.com/teacher_2014.aspx"  target="_self">师资介绍</a></li>
<li><a href="http://www.jinggong.com/specialty_2014.aspx"  target="_self">专业介绍</a></li>
<li><a href="http://www.jinggong.com/teacher_2014.aspx"  target="_self">验光教程</a></li>
<li><a href="http://www.jinggong.com/zhaosheng_2014.aspx"  target="_self">招生简章</a></li>
<li><a href="http://www.jinggong.com/baoming_2014.aspx"  target="_self">网上报名</a></li>
</ul>
</li><em></em>
<li><a id="nav010" href="http://www.jinggong.com/zhuangxiu_2014.aspx"  target="_self">装修工程</a>
<ul id="subNews" class="second-menu">
<li><a href="http://www.jinggong.com/zhuangxiu_2014.aspx#"  target="_self">装修流程</a></li>
<li><a href="http://www.jinggong.com/zhuangxiu_2014.aspx#"  target="_self">门店平面图</a></li>
<li><a href="http://www.jinggong.com/zhuangxiu_2014.aspx#"  target="_self">门店效果图</a></li>
<li><a href="http://www.jinggong.com/zhuangxiu_2014.aspx#"  target="_self">门店现场图</a></li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript">//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;
}
</script>

HTML代码在线测试工具