• 鼠标移过切换目标文字，这实际上是一个双语菜单，不过有时候从技术角度来讲，有的朋友一时听不明白双语菜单，所以就把它摘出来，实际上它的实现就是根据a属性来定义的，代码没有复杂的东西，仔细看一下吧。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>河北草坪使用的割草机的优点及性能</title>

<style>

body{

font-size:9pt;

}

#Menu{

width:498px;

margin:48px auto;

border:1px solid #EEE;

overflow:hidden;

}

#Menu ul{ margin:0;padding:0;list-style:none;}

#Menu li{

width:88px;

height:22px;

line-height:22px;

float:left;

overflow:hidden;

text-align:center;

}

#Menu a{ width:100px;float:left;overflow:hidden;}

#Menu span{display:block;margin-top:-22px;}

#Menu a:hover{padding-top:22px;}

</style>

</head>

<body>

<ul id="Menu">

<li><a href="#"><span>MyBlog</span>我的博客</a></li>

<li><a href="#"><span>NEWS</span>我的近况</a></li>

<li><a href="#"><span>ABOUT</span>关于我</a></li>

<li><a href="#"><span>CONTACT</span>联系我</a></li>

<li><a href="#"><span>照片</span>PHOTO</a></li>

</ul>

</body>

</html>