符合标准的中英文双语导航菜单代码

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

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

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

<head>

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

<meta name="Keywords" content="导航,菜单" />

<meta http-equiv="Description" content="中英文双语导航菜单的演示" />

<meta content="all" name="robots" />

<meta name="copyright" content="http://www.knowsky.com" />

<title>中英文双语导航菜单knowsky.com</title>

<link href="css/main.css" rel="stylesheet" type="text/css" />

<style type="text/css" media="all">

#nav {

padding: 10px 10px 0;

font-size: 12px;

font-weight: bold;

font-family:Arial, Helvetica, sans-serif,宋体;

margin: 1em 0 0;

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: #DDDDDD;

color: #666666;

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: #FFFFFF;

background: #DC4E1B;

}

#navbar{

background: #DC4E1B;

height: 8px;

overflow: hidden;

clear: both;

}

</style>

</head>

<body>

<div id="top">

<h1>演示:中英文双语导航菜单</h1>

<div id="show">

<ul id="nav">

<li><a href="index.html">Home<span>首页</span></a></li>

<li><a href="about.html">About us<span>关于我们</span></a></li>

<li><a href="products.html">Products<span>产品展示</span></a></li>

<li><a href="services.html">Services<span>售后服务</span></a></li>

<li><a href="contact.html">Contact<span>联系我们</span></a></li>

</ul>

<div id="navbar"></div>

</div>

</div>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航