鼠标指向变成英文导航（CSS）_网页代码站(www.webdm.cn)
1 <title>鼠标指向变成英文导航（CSS）_网页代码站(www.webdm.cn)</title>
2 <style type="text/css">
3 <!--
4 body {
5 background-color: #669999;
6 }
7 #nav{
8 font-size: 12px;
9 list-style:none;
10 }
11 #nav li{
12 float: left;
13 margin-right: 1px;
14 }
15 .bi{
16 position: relative;
17 z-index: 0;
18 }
19 .bi:hover span{
20 visibility: visible;
21 top: -8;
22 left: 0;
23 cursor: pointer;
24 }
25 .bi span{
26 position: absolute;
27 left: -999em;
28 visibility: hidden;
29 }
30 #nav li a,.bi:hover span{
31 line-height: 30px;
32 text-decoration: none;
33 color: #ffffff;
34 display: block;
35 width: 85px;
36 text-align: center;
37 }
38 #nav li a:hover,.bi:hover span{
39 color: #ffffff;
40 background: #7ec638;
41 line-height: 29px;
42 BACKGROUND-POSITION: 30px 8px; BORDER-TOP: #7ec638 3px solid;
43 }
44 -->
45 </style>
46 <TABLE cellSpacing=0 cellPadding=0 width="760" align=center border=0 VALIGN="TOP">
47 <TR>
48 <TD>
49 <table width="100%" height="28" border="0" cellpadding="0" cellspacing="0" bgcolor="#7ec638">
50 <tr>
51 <td height="28">
52 <ul id="nav">
53 <li class="daohang"><a class="bi" href="#">网站首页<span>Home</span></a></li>
54 <li class="daohang"><a class="bi" href="#">公司简介<span>Company</span></a></li>
55 <li class="daohang"><a class="bi" href="#">公司产品<span>Products</span></a></li>
56 <li class="daohang"><a class="bi" href="#">客户方案<span>Proposal</span></a></li>
57 <li class="daohang"><a class="bi" href="#">典型客户<span>Clients</span></a></li>
58 </ul></td>
59 </tr>
60 </table>
61 </TD>
62 </TABLE>
63
64 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/79de86a9-67b5-4d12-891f-6a1d8326681d.html
