很久没有做资源分享了，趁过年回家之前先来分享一个，资源和图全是别人做的，我自知从整站中精简了下，然后再css里面做了一下注释，供懒虫们使用。节约开发成本 = = ，可以这么理解。以后决定做成分享专题，把自己觉得不错的资源都分享出来，希望对大家有所帮助！

这次为大家带来一个漂亮的导航。直接看资源分享图。

核心CSS代码：

/*-- nav css start --*/ 
#channel-nav {background:transparent url("catalogbar.png") no-repeat;height: 33px;margin: 0 auto;overflow: hidden;padding: 1px 2px 3px;position: relative;width: 980px; margin-top:40px;} 
#channel-nav ul {font-size: 14px;height: 33px;left: 4px;line-height: 33px;overflow: hidden;position: absolute;top: 1px;width: 100%;} 
#channel-nav li {background: transparent url("catalogbar.png") no-repeat 0 -40px ;float: left;height: 33px;left: -2px;overflow: hidden;padding-left: 2px;position: relative;list-style:none;} 
#channel-nav li a {color: #FFFFFF;float: left;padding: 0 16px;text-decoration: none;} 
#channel-nav li a:hover {background: url("catalogbar.png") no-repeat 50% -41px; text-decoration: none;} 
#channel-nav li.selected a {background: url("catalogbar.png") no-repeat 50% -40px; text-decoration: none;} 
/*-- nav css end --*/ 

直接观看效果：点击观看

素材下载：点击下载

也可以看看以前分享的：

1. 动网官网-Left-ShowTip效果分析
2. 动网官网-Top-banner效果分析