CSS skills: 1） Navigate item's animation

 

<style>
        .nav { border-right:1px solid #268eb7; }
        .nav li{overflow:hidden;height:55px;border-left:1px solid #268eb7;}
        .nav li.active a,.nav li.active small{top:-55px !important;}
        .nav li a{position:relative;display:block;padding:7px 0 0;height:55px;color:#fff;text-transform:uppercase;}
        .nav li a small{margin-top:-3px;color:#6aa3c2;}
        .nav li a.hover{background-color:#fff;color:#007aaa;}
        .nav li.hover small{color:#dadada;}
</style>
<div style="background-color: #0e90d2">
            <ul class="am-avg-lg-8 nav">
                <li class="box am-text-center">
                    <a href="">首页<small class="am-block">Home</small></a>
                    <a href="" class="hover">首页<small class="am-block">Home</small></a>
                </li>
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/ppls">品牌连锁<small class="am-block">BRAND CHAIN</small></a>
                    <a href="http://kgdn.kangbeijia.cn/ppls" class="hover">品牌连锁<small class="am-block">BRAND CHAIN</small></a>
                </li>
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/zjtd" style="top: 0px;">专家团队<small class="am-block">Experts</small></a>
                    <a href="http://kgdn.kangbeijia.cn/zjtd" class="hover" style="top: 0px;">专家团队<small class="am-block">Experts</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/hxjs" style="top: 0px;">核心技术<small class="am-block">Technology</small></a>
                    <a href="http://kgdn.kangbeijia.cn/hxjs" class="hover" style="top: 0px;">核心技术<small class="am-block">Technology</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="javascript:void(0)" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a>
                    <a href="javascript:void(0)" class="hover" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/myal">美牙案例<small class="am-block">DENTAL CASE</small></a>
                    <a href="http://kgdn.kangbeijia.cn/myal" class="hover">美牙案例<small class="am-block">DENTAL CASE</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/shzr">社会责任<small class="am-block">Sociol duty</small></a>
                    <a href="http://kgdn.kangbeijia.cn/shzr" class="hover">社会责任<small class="am-block">Sociol duty</small></a>
                </li>                                
                <li class="box am-text-center diff">
                    <a href="javascript:void(0)" onclick="swtClick()" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a>
                    <a href="javascript:void(0)" onclick="swtClick()" class="hover" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a>
                </li>
            </ul>
        </div>
<script>
//更改导航栏目动画代码
    $(function(){
            var index;
            var obj;
            $('.nav li').each(function(){
                obj=$(this);
                index=obj.index();
                if(index==4){
                    obj.find('a').attr('href','javascript:void(0)');
                }
                var cloneLi=obj.find('a').clone().addClass('hover');
                obj.append(cloneLi);
            });
            $('.nav li').hover(function(){
                $(this).children().stop().animate({top:'-55px'},250);
            },function(){
                var _this=$(this).children();
                _this.stop().animate({top:'0'},250);
            });
        });
</script>