1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>鼠标经过变换文字</title>
6 <style>
7 #Menu {
8 width:500px;
9 margin:50px auto;
10 border:1px solid #CCC;
11 overflow:hidden;
12 }
13 #Menu ul {
14 margin:0;
15 padding:0;
16 list-style:none;
17 }
18 #Menu li {
19 width:100px;
20 height:22px;
21 line-height:22px;
22 float:left;
23 overflow:hidden;
24 text-align:center;
25 }
26 #Menu a {
27 width:100px;
28 float:left;
29 overflow:hidden;
30 }
31 #Menu span {
32 display:block;
33 margin-top:-22px;
34 }
35 #Menu a:hover {
36 padding-top:22px;
37 }
38 </style>
39 </head>
40 <body>
41 <ul id="Menu">
42 <li><a href="#"><span>HOME</span>首页</a></li>
43 <li><a href="#"><span>NEWS</span>新闻</a></li>
44 <li><a href="#"><span>ABOUT</span>关于</a></li>
45 <li><a href="#"><span>CONTACT</span>联系</a></li>
46 <li><a href="#"><span>照片</span>PHOTO</a></li>
47 </ul>
48 </body>
49 </html>
