导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）

上代码前先说一下一个需要注意的点

我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局，但是如果外面这个大容器的没有设置固定的高度值，那么大容器高度不会随着里面小容器高度变化而变化，产生内容溢出的现象，这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，（但是IE6下不生效）

实现法一：

HTML代码：

<div id="wrap">
    <ul id="list">
       <li><a href="#">首页<span>Home</span></a></li>
        <li><a href="#">博客<span>Blog</span></a></li>
        <li><a href="#">学院<span>institute</span></a></li>
        <li><a href="#">下载<span>Download</span></a></li>
    </ul>
</div>

CSS代码

    <style>
        ul,li,p{padding:0; margin:0;}
        li{list-style:none;}
        a{text-decoration: none;color:#fff;  }
        #wrap{
            width:502px;
            margin:0 auto;
        }
        #list{width:500px;  border:1px solid #f10215; overflow:auto;}
        #list li{float:left;height:20px;line-height:20px; width:120px;text-align:center; margin-left:4px; background:#e34434;overflow:hidden}
        #list li a,span{display:block;  }
        #list li a:hover{margin-top:-20px; background:#FF3399;  }
    </style>

注意：#list{overflow:auto}如果不加这句代码，因为没有为其设置高度，设置边框后会看到有高度塌陷的问题

实现法二

HTML代码

<div id="wrap">
    <ul id="lis">
    <li class="nav">
        <p class="cha"><a href="javascript:;">首页</a></p>
        <p class="eng"><a href="javascript:;">Home</a></p>
    </li>
    <li class="nav">
        <p class="cha"><a href="javascript:;">博客</a></p>
        <p class="eng"><a href="javascript:;">Blog</a></p>
    </li>
    <li class="nav">
        <p class="cha"><a href="javascript:;">学院</a></p>
        <p  class="eng" ><a href="javascript:;">institute</a></p>
    </li>
    <li class="nav">
        <p class="cha"><a href="javascript:;">下载</a></p>
        <p class="eng"><a href="javascript:;">Download</a></p>
    </li>
    </ul>
</div>

CSS代码

    <style>
        ul,li,p{padding:0; margin:0;}
        li{list-style:none;}
        a{text-decoration: none;color:#fff;  }
        #wrap{
            width:502px;
            margin:0 auto;
        }
        #lis{width:500px;  border:1px solid #f10215; overflow:auto;}
        #lis li{float:left;height:20px;line-height:20px; width:120px;text-align:center; margin-left:4px; background:#e34434;}
        #lis{margin-top:20px;}
        #lis li .eng{display:none;}
    </style>

注意：#lis{overflow:auto}如果不加这句代码，因为没有为其设置高度，设置边框后会看到有高度塌陷的问题

jQuery代码

    $(function(){
        $('#lis').find('li').on(
            {'mouseover':function(){
                    $(this).find('.cha').hide();
                    $(this).find('.eng').show().css('background',"#FF3399");
                },
                'mouseout':function(){
                    $(this).find('.cha').show();
                    $(this).find('.eng').hide();
                }
            })
    })

看完是不是觉得好简单呀，我也这么认为的，嗯，就当练手了。当然实现方法有很多很多，上面的两种方法仅供参考