類似淘寶一樣的純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訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些