双语导航菜单

<!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=utf-8" />
<title>双语导航菜单--鼠标放上去就能切换语言</title>
<style type="text/css">
{margin:0;padding:0;}    
#nav
{
padding
: 10px 10px 0;
font
: bold 12px Arial, Helvetica, sans-serif,"宋体";
list-style
:none;
}


#nav li
{
float
: left;
margin-right
: 1px;
}


#nav li a,#nav li a:hover span
{
line-height
: 20px;
text-decoration
: none;
background
: #DDD;
color
: #666;
display
: block;
width
: 80px;
text-align
: center;
overflow
:hidden;
}


#nav li a span
{display:none;}

#nav a:hover
{
position
: relative;
}


#nav a:hover span
{
display
:block;
position
:absolute;
top
: 0;
left
: 0;
cursor
: pointer;
}


#nav a:hover span
{
    padding-top
:2px;
}


#nav li a:hover,#nav li a:hover span
{
color
: #FFF;
background
: #DC4E1B;
}


#navbar
{
background
: #DC4E1B;
height
: 8px;
overflow
: hidden;
clear
: both;
}


</style>
</head>
<body>
    
<ul id="nav">
    
<li><href="index.html">Home<span>首 页</span></a></li>
    
<li><href="about.html">About us<span>关于我们</span></a></li>
    
<li><href="products.html">Products<span>产品展示</span></a></li>
    
<li><href="services.html">Services<span>售后服务</span></a></li>
    
<li><href="contact.html">Contact<span>联系我们</span></a></li>
</ul>
<div id="navbar"></div>
</body>
</html>
posted @ 2009-11-21 23:02  朝夕  阅读(352)  评论(0编辑  收藏