改变内容文字大小：

XHTML+CSS应用教程——利用CSS实现双语导航条

一个比较有趣的例子，可以用来装蒜，不过使用价值就不大了。主要还是要学会思路……

实际效果:

 

代码及简要分析:


<style type="text/css">
ul,li{
	margin:0; 
	padding:0; 
	float:left;
	display:block;
    list-style-type: none; 
}
.bi{
	position: relative;
	z-index: 0;
}
.bi:hover{z-index: 99;}
.bi:hover span{
	visibility: visible;
	top: 0;
	left: 0;
}
.bi span{
	position: absolute;
	visibility: hidden;
}
#nav li a,.bi:hover span{
	 line-height: 20px;
	 text-decoration: none;
	 background: #DDDDDD;
	 color: #666666;
	 display: block;
	 width: 80px;
	 text-align: center;
}
#nav li a:hover,.bi:hover span{
	color: #FFFFFF;
	background: #DC4E1B;
}
.bi:hover span{padding-top: 2px;}
</style>
<body>
<ul id="nav">
	<li><a class="bi" href="../www.cainiao8.html">Home
<span>首　页</span></a></li>
	<li><a class="bi" href="../www.cainiao8.html">CSS
<span>样式表</span></a></li>
	<li><a class="bi" href="../www.cainiao8.html">样式表
<span>CSS</span></a></li>
	<li><a class="bi" href="../www.cainiao8.html">首　页
<span>Home</span></a></li>
</ul>