蓝色风格带New图标的仿猪八戒网css导航

蓝色风格带New图标的仿猪八戒网css导航。兼容IE6等主流浏览器。 1、在head引入下面的css样式

<style type="text/css">
body{font:12px Arial,Verdana,Tahoma,"宋体";}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20537A;}
a:hover{text-decoration:underline;}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
.clearfix {_zoom: 1;}
*+html .clearfix {overflow:auto;}
.menu_navcc{width:970px; margin:0 auto;}
.menu_nav{width:970px;height:48px;background:url(img/nav_bg.gif) repeat-x;float:left;margin-top:18px;}
.menu_nav .nav_content{padding-left:25px;background:url(img/nav_l_bg.gif) no-repeat;float:left;}
.menu_nav .nav_content li{width:88px;height:48px;padding-left:15px;padding-right:13px;background:url(img/nav_li_right.gif) no-repeat right center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}
.menu_nav .nav_content li a{color:#fff;width:88px;height:48px;display:block;}
.menu_nav .nav_content li.current{line-height:37px;}
.menu_nav .nav_content li em{background:url(img/bid_new.gif) no-repeat;width:35px;height:21px;display:inline-block;position:absolute;top:-20px;left:40px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:88px;height:37px;background:url(img/nav_li_current.gif) no-repeat;display:block;color:#fff;}
.menu_nav .nav_content li a:hover{background:url(img/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}
.menu_nav_right{padding-right:20px;background:url(img/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}
</style>

2、把以下代码拷贝到你想引用的地方

<div class="menu_navcc">
    <div class="menu_nav clearfix">
        <ul class="nav_content">
            <li class="current"><a href="http://www.5imoban.net/" title="首页"><span>首页</span></a></li>
            <li><a href="http://www.5imoban.net/psdmoban/" title="网页PSD模板下载"><span>PSD模板</span></a></li>
            <li><a href="http://www.5imoban.net/cssmoban/" title="网页CSS模板下载"><span>CSS模板</span></a></li>
            <li style="position:relative;"><a href="http://www.5imoban.net/texiao/" title="特效插件"><span>特效插件</span></a><em></em></li>
            <li><a href="http://www.5imoban.net/yuanma/" title="源码下载"><span>源码下载</span></a></li>
            <li><a href="http://www.5imoban.net/kuzhan/" title="酷站欣赏"><span>酷站欣赏</span></a></li>
            <li><a href="http://www.5imoban.net/ziyuan/" title="建站资源"><span>建站资源</span></a></li>
        </ul>
        <div class="menu_nav_right">
        </div>
    </div>
</div>

注：如果您想改变“New”图标的位置，例如，放到PSD模板上面，只要给PSD模板外层的li一个行内样式“style="position:relative"”，然后再</a>后面加上<em></em>即可。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！