效果:
刚开始时是中文菜单,
鼠标悬浮在某一项时,该项切换成英文且背景颜色改变。
源码:
<!doctype html>
<head>
<style>
*{padding:0px;margin:0px;}
html{background:#abcdef;}
div{margin:200px auto;width:80%;}
ul{list-style:none;
overflow:hidden;/*显示英文时,隐藏切换后的中文*/
}
ul li{float:left;border-bottom:8px solid #f00;}
ul li a{background:#f90;
display:block;
line-height:40px;
color:white;
font-weight:bold;
padding:0px 5px;
margin:0px 1px;
}
ul li a span{display:none;}
ul li a:hover{background:#00f;
margin-top:-40px;/*鼠标悬浮上去时,将中文向上移动40px,*/
}
ul li a:hover span{display:block;}
</style>
</head>
<body>
<div>
<ul>
<li><a>学校简介<span>About hpu</span></a></li>
<li><a>管理机构<span>Departments</span></a></li>
<li><a>院系设置<span>School</span></a></li>
<li><a>招生就业<span>Enrollment</span></a></li>
<li><a>科学研究<span>Research</span></a></li>
</ul>
<div>
</body>