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

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

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

实现法一：

HTML代码：

    

       
首页Home
        
博客Blog
        
学院institute
        
下载Download
    

CSS代码

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

实现法二

HTML代码

    

    

        
首页
        
Home
    
    

        
博客
        
Blog
    
    

        
学院
        
institute
    
    

        
下载
        
Download
    
    

CSS代码

注意：#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();
                }
            })
    })

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