很漂亮的CSS水平导航条_菜单导航特效

仿MAC机风格的水平导航条，纯CSS实现，用到一张背景图片，点击运行可以下载。每项菜单宽度可以自适应，鼠标放上菜单更换背景，由蓝变红，很漂亮。

<!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" mrc="text/html; charset=gb2312" />
<title>水平导航条(DIV+CSS)</title>
<style type="text/css">
body{
  background: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  color: #555555;
  padding: 0px;
  margin: 5px;
  text-align: center;  
  font-size: 9pt;
}

#nav{
  text-align: center;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  margin:15px auto;
}
#nav ul{
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#nav li{  
  float: left;
  }
#nav li a{
  text-decoration: none;
  color: #666;  
  background: url(http://p1.mb5u.com/texiao/menubg.gif) no-repeat 0px 0px;
  width: 100px;
  line-height: 20px;
  display: block;
}
#nav li a:hover{
  color: #CC0000;  
  background: url(http://p1.mb5u.com/texiao/menubg.gif) no-repeat 0px -20px;  
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service/ad.shtml">About us</a></li>
<li><a href="/sort/list_1_1.shtml">Products</a></li>
<li><a href="/sort/list_2_1.shtml">ASP Codes</a></li>
<li><a href="/sort/list_2_1.shtml">PHP Codes</a></li>
<li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li>
<li><a href="/sort/index.shtml">Services</a></li>
</ul></div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2011-02-24

[收藏][报错][返回列表]

很漂亮的CSS水平导航条_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些