<style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;font-family:"微软雅黑";color:#666;} .nav{1190px;height:36px;margin:150px auto; border-bottom:3px solid #E6E6E6; position:relative; } .nav ul li{list-style:none;float:left;80px;height:30px; text-align:center;line-height:30px; } .nav ul li a{text-decoration:none;color:#000;font-size:16px;} .nav .sel{80px;border-bottom:3px solid #000; position:absolute;left:0;bottom:-3px; } </style> <body> <div class="nav"> <ul id="n_ul"> <li><a href="#">首页</a></li> <li><a href="#">编程开发</a></li> <li><a href="#">职业技能</a></li> <li><a href="#">网络营销</a></li> <li><a href="#">IT设计</a></li> <li><a href="#">生活百科</a></li> <li><a href="#">英语教程</a></li> <li><a href="#">泰语教程</a></li> <li><a href="#">投资理财</a></li> <li><a href="#">时尚健康</a></li> <li><a href="#">公务员</a></li> <li><a href="#">财会教程</a></li> <li><a href="#">工程教程</a></li> <li><a href="#">其 它</a></li> </ul> <p class="sel"></p> </div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $("#n_ul").find("li").hover(function(){ // 计算导航外边框距离左侧的距离（根据浏览的大小动态变化的值） var auto_left = ($(window).width() - 1190) / 2; // 选中当前距离div 盒子的左侧的距离 left:的值; var _left = $(this).offset().left - auto_left; $(".nav").find(".sel").stop(); // 创建动画函数 $(".nav").find(".sel").animate({left:_left},100); }); </script> </body>
