精美的网页导航菜单
如此精美的一款网页导航菜单，不敢独享，这是仿以前猪八戒的网页导航，感觉非常大气，纯DIV+CSS实用的哦，代码量很少，如果不喜欢这个颜色的，也很容易更改成其它颜色的导航。
很有2.0的元素，适当的修改，用在企业站，或者个人站上非常适合，index.html 是网页效果的预览，img 是相关的导航图片，index.html 里包含了CSS样式的代码，在实际使用时，可单独分开，下面是 index.html 的代码，img 导航图片代码单独下载即可。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿2010猪八戒首页导航菜单_懒人图库</title>
<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;}
p{
margin-bottom:15px}
-->
</style>
</head>
<body style="text-align:center">
<div style="height:100px;"></div>
<div style="clear:both"></div>
<!--nav,start-->
<div class="menu_navcc">
<div class="menu_nav clearfix">
<ul class="nav_content">
<li class="current"><a href="http://www.60ie.net" title="首页"><span>首页</span></a></li>
<li><a href="http://www.60ie.net" title="JS广告代码"><span>广告代码</span></a></li>
<li><a href="http://www.60ie.net" title="CSS教程"><span>CSS教程</span></a></li>
<li style="position:relative;"><a href="http://www.60ie.net" title="导航菜单"><span>导航菜单</span></a><em></em></li>
<li><a href="http://www.60ie.net" title="溶图素材"><span>溶图素材</span></a></li>
<li><a href="http://www.60ie.net" title="常用代码"><span>常用代码</span></a></li>
</ul>
<div class="menu_nav_right">
</div>
</div>
</div>
<!--nav,end-->
</body>
</html>
导航图片 img/下载，记得新建根目录下 img文件夹，将其需要的图片放进去就行了。
看缩略图，很像天天的导航~
恩，代码好多呀
喜欢，但是不会搞
分享了，确实不错。
有没有考虑过进入内页后，对应导航的样式该怎么自动改变？
这是固定的样式,不是自适应的.
文章内页没有图片展示了？