鼠标移过切换目标文字,这实际上是一个双语菜单,不过有时候从技术角度来讲,有的朋友一时听不明白双语菜单,所以就把它摘出来,实际上它的实现就是根据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>
转载于:https://blog.51cto.com/chunzhisu/1536288