DIV+CSS仿腾讯拍拍网导航菜单_菜单导航特效

DIV+CSS仿腾讯拍拍网的导航菜单，现在不少的网站都有类似的效果，尤其是菜单左上方的一个“新”字，是菜单的点晴之笔，考验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>
html,body,div,a,sup,li,ul{margin:0;padding:0;}
body{font:12px Tahoma, Verdana;text-align:center;background-color:#fff;}
ul{list-style-type:none;}
a:link,a:visited{color:#333;text-decoration:none;}
a:hover,a:active{color:#ff4e00;text-decoration:underline;}
#navColumn li,#navColumn a:hover,#navColumn a:active,.navAdditional,.navAdditional div{background:url(http://p1.mb5u.com/texiao/1/heads.png) no-repeat;}
.navAdditional div{background-position:left -212px;padding-left:4px;}
.navAdditional{background-position:right -212px;margin-left:8px;float:right;width:250px;padding-right:4px;}
#navColumn{width:auto;padding:0 5px 0 6px;margin-top:12px}
#navColumn ul{background:url(http://p1.mb5u.com/texiao/1/heads.png) left -245px repeat-x;padding-left:2px;height:32px;}
#navColumn li{float:left;line-height:32px;text-align:center;width:60px;background-position:-149px -287px;}
#navColumn li.last{background:none;}
#navColumn li.now a:link,#navColumn li.now a:visited{background-position:left -336px;color:#fff;font-size:14px;font-weight:700;}
#navColumn a{position:relative;}
#navColumn sup{position:absolute;background:url(http://p1.mb5u.com/texiao/1/heads.png) -120px -445px repeat-x;text-indent:-199em;width:16px;height:19px;top:-6px;overflow:hidden;right:10px;}
#navColumn a:link,#navColumn a:visited{width:60px;display:block;}
#navColumn a:hover,#navColumn a:active{background-position:left -336px;width:60px;height:32px;display:block;text-decoration:none;color:#fff;font-weight:700;}
</style>
</head>
<body>
<div id="navColumn">
  <div class="navAdditional">
    <div>
      <ul>
        <li><a href="#">充值<sup>新</sup></a></li>
        <li><a href="/jscss/">特惠</a></li>
        <li><a href="/">优品</a></li>
        <li class="last"><a href="/">酒店</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

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

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

DIV+CSS仿腾讯拍拍网导航菜单_菜单导航特效

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

菜单导航特效推荐

猜你也喜欢看这些