在看视频的时候，觉得这个导航挺不错，可以学习学习！希望对大家有点用处。
<!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" content="text/html; charset=gb2312" />
<style>
#menu { height:47px; width:980px; background:url(http://v.gougou.com/brand/img/hd/nav.gif) no-repeat; clear:both; overflow:hidden; position:relative; margin-top:50px;}
#menu #menu ul { margin-left:10px; } #menu li { float:left; height:36px; margin:8px 0 0; padding:0 10px; background:url(http://v.gougou.com/brand/img/hd/line.gif) no-repeat 100% 12px; } #menu li.nobg { background:none; } #menu li a { float:left; display:block; height:36px; background:url(http://v.gougou.com/brand/img/hd/nav_item.gif) no-repeat; text-indent:-999px; overflow:hidden; } #menu li a.n1 { background-position:left top; width:77px;} #menu li.selected a.n1,#menu li a.n1:hover { background-position:left -36px; } #menu li a.n2 { background-position:-77px top; width:97px;} #menu li.selected a.n2,#menu li a.n2:hover { background-position:-77px -36px; } #menu li a.n3 { background-position:-174px top; width:87px;} #menu li.selected a.n3,#menu li a.n3:hover { background-position:-174px -36px; } #menu li a.n4 { background-position:-261px top; width:92px;} #menu li.selected a.n4,#menu li a.n4:hover { background-position:-261px -36px; } #menu li a.n5 { background-position:-353px top; width:97px;} #menu li.selected a.n5,#menu li a.n5:hover { background-position:-353px -36px; } #menu li a.n6 { background-position:-450px top; width:97px;} #menu li.selected a.n6,#menu li a.n6:hover { background-position:-450px -36px; }</style><title>sougou影视导航菜单</title></head><body><p>在看视频的时候，觉得这个导航挺不错，可以学习学习！希望对大家有点用处。</p> <div id="menu"> <ul> <li><a href="http://www.showwho.com/" class="n1">首页</a></li> <li><a href="http://www.showwho.com/" class="n2">品牌展播</a></li> <li><a href="http://www.showwho.com/" class="n3">排行榜</a></li> <li><a href="http://www.showwho.com/" class="n4">VIP客户</a></li> <li><a href="http://www.showwho.com/" class="n5">创意专题</a></li> <li class="nobg"><a href="http://www.showwho.com/" class="n6">品牌活动</a></li> </ul> </div></body></html>