类似淘宝一样的纯CSS导航菜单_菜单导航特效

非常精致的类似淘宝一样的菜单导航条，鼠标滑过变色，这里用到一个背景图片，请运行时自行下载。本导航条用纯CSS代码实现，没有用到任何的JS代码，因此实用性和兼容性大大增强，有时候JS的东西在火狐及其它浏览器内会存在不兼容的题目，这一个尽对你会喜欢哦！

<!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>CSS类似淘宝一样的导航菜单</title>
<style>
.tab{float:left; font-size:12px; line-height:1.8}
.tab li{display:inline;}
.tab li a{background:url(http://p1.mb5u.com/texiao/xgb.gif) no-repeat;float:left;text-decoration:none;}
.tab li a span{ display:block; background:url(http://p1.mb5u.com/texiao/xgb.gif) no-repeat; padding:5px 10px 5px 20px;}
.tab a:link,.tab a:visited{ background-position:right -51px; text-decoration:none}
.tab a:hover,.tab a:active,.tab a.on,.tab a.on:link,.tab a.on:visited{ background-position:right -162px;}
.tab a:link span,.tab a:visited span{ background-position:0 0; color:#FFF; text-decoration:none}
.tab a:hover span,.tab a:active span,.tab a.on span,.tab a.on:link span,.tab a.on:visited span{ background-position:0 -107px; color:#000;}
.tab .one a:link span,.tab .one a:visited span{ background-position:left -262px; padding-left:30px;}
.tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left -212px; padding-left:30px; color:#000}
</style>
</head>

<body>
<ul class="tab">
 <li class="one"><a href="/" class="on">开源首页</a></li>
 <li><a href="/sort/list_2_34_1.shtml">聊天留言</a></li>
<li><a href="/sort/list_2_35_1.shtml">企业建站</a></li><li><a href="/sort/list_2_36_1.shtml">论坛社区</a></li><li><a href="/sort/list_2_37_1.shtml">新闻文章</a></li><li><a href="/sort/list_2_52_1.shtml">CMS系统</a></li><li><a href="/sort/list_2_53_1.shtml">博客日记</a></li><li><a href="/sort/list_2_51_1.shtml">影音视频</a></li><li><a href="/sort/list_2_44_1.shtml">商务商城</a></li><li><a href="/sort/list_2_54_1.shtml">小偷采集</a></li>
</ul>
</body>
</html>

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

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

类似淘宝一样的纯CSS导航菜单_菜单导航特效

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

菜单导航特效推荐

猜你也喜欢看这些