CSS实现中英双语导航栏——利用块级元素隐藏实现

如何实现中英双语导航栏？（所谓的中英双语导航栏就是导航栏显示的是中文（或英文）然后输入悬浮在其上的时候转成英文（或中文））

方法有很多，此次记录一种使用块级元素隐藏实现的中英文切换。

上代码：
HTML代码：

<div id="nav">
        <ul>
            <li>
                <a href="sy04.html"><span>Home</span>首页</a>
            </li>
            <li>
                <a href="sy04.html"><span>News</span>行业新闻</a>
            </li>
            <li>
                <a href="sy04.html"><span>Product</span>产品</a>
            </li>
            <li>
                <a href="sy04.html"><span>Order</span>产品订购</a>
            </li>
            <li>
                 <a href="sy04.html"><span>Technology</span>技术力量</a>
            </li>
            <li>
                <a href="sy04.html"><span>Work</span>合作加盟</a>
            </li>
        </ul>

    </div>

CSS代码：

#nav{
    width: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    overflow:hidden;
}
#nav li{
    width: 100px;
    height: 22px;
    line-height: 22px;
    list-style-type: none;
    float:left;
    overflow: hidden;
    text-align: center;
}
#nav a{
    width: 100px;
    float: left;
    overflow: hidden;
}
a span{
    display: block;
    margin-top: -22px;
    color: red;
}
#nav a:hover{
    padding-top: 22px;
}

正常的效果：

当我们删除div、li、a中的overflow：hidden，效果：

是不是有点明目了

---

当a标签不加的overflow：hidden：

因为a标签只能显示一行，当不加"overflow：hidden"时，因为a标签中的span的属性display：block把英文部分变成了块级元素会换行，所以a标签中内容要显示两行，又因为span标签外边距上移22px所以a标签中就只剩下中文的一行了

span不上移:

span上移：

当a标签加上overflow：hidden：
因为a标签中的span被移出去了，所以会被加上的overflow：hidden隐藏掉。

当鼠标悬浮在上面时增加了内边距，故span标签又能显示：

当li标签再加上overflow：hidden：
悬浮增加了高度，且超过了li的高度，所以隐藏

当div标签加上overflow：hidden
之前因为没有加超出隐藏，ul标签中的两行只会选择隐藏的一行，也就是为什么div的框没有框住文字，加上超出隐藏，就能把整个ul包住。