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

轉載于:https://www.cnblogs.com/webdm/archive/2010/12/22/1913340.html

總結

以上是生活随笔為你收集整理的鼠标指向变成英文导航（CSS）_网页代码站(www.webdm.cn)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。