添加收藏
 系统管理
 联系方式

  汉南在线网页设计HTML/CSS

符合标准的中英文双语导航菜单代码
作  者:匿名
关键字:CSS、DIV



<!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.alixixi.com" />
<title>中英文双语导航菜单alixixi.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>



来源:网络
阅读:13
日期:2008-5-12

【 双击滚屏 】 【 推荐朋友 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:网页教学网DIV+CSS标准蓝色菜单(2)
下一篇:用DIV+CSS实现的网易首页滑动效果的标签

  >> 相关文章
 
  ·网页教学网DIV+CSS标准蓝色菜单(2)
  ·采用Table+CSS实现的TabPane 选项卡代码实例
  ·CSS特效代码之制作韩国风格菜单
  ·有立体效果的CSS层代码
  ·用CSS实现改变鼠标形状的代码
  ·又一种新的CSS垂直导航代码
  ·一个比较酷的CSS生成带提示的菜单
  ·鼠标指向有背景的CSS导航菜单

5.12汶川大地震遇难同胞默哀 | 汉南在线总站 | 免费电影 | BT电影下载 | 东莞信息网 | 流行购商城

授权使用:汉南在线 http://hnzx.hzwz.net/
经营许可证:陕ICP备05000109号 Powered by:汉南在线
Copyright (c) 2002-2007 汉南在线. All Rights Reserved .