石周明

CSS部分：

ul li{
border:1px solid #ccc;
font-family:"Times New Roman", Times, serif;
font-size:12px;
width:100px;
height:30px;
line-height:30px;
overflow:hidden;
}
ul li a{
display:block;
width:100px;
height:30px;
overflow:hidden;
color:#999999;
background:#fff;
}
ul li a:hover{
background:#ffffff;
color:#a40000;
}
ul li a span{
display:block;
}
ul li a:hover span{
display:none;
}

.t2{
background:#ccc;
}
.t2 td{
background:#fff;
}
.t2 td a{
display:block;
width:200px;
height:50px;
line-height:50px;
text-align:center;
background:#fff;
}

.t2 td a:hover{
background:#ffffff;
}
.t2 td a em{
display:none;
width:198px;
height:48px;
line-height:48px;
border:1px solid #ffadad;
background-color:#ffeeee;
cursor:pointer;
}
.t2 td a:hover em{
display:block;
}
.t2 td a span{
display:block;
}

.t2 td a:hover span{
display:none;
}

html部分：

<ul>
<li><a href="#"><span>home</span>首页</a></li>
</ul>

<table class="t2" border="0" cellspacing="1" cellpadding="0">
<tr>
    <td><a href="#"><span>home</span><em>首页</em></a></td>
</tr>
</table>

table和li的处理方式有些不一样 具体可以看这里