亮蓝色水平CSS选项卡菜单

演示效果截图

用到的图片

CSS代码

body{background:#fff url(bkg_page.png) repeat-x;padding:0;
margin:0;font-family:'Verdana';font-size:12px;color:#7f8991}
#header{margin:108px 0 0 100px}
#header em{display:none}
#header ul{100%;float:left;
padding:0;margin:0;list-style-type:none}
#header li{float:left;padding:0;margin:0;display:inline}
#header li a{display:block;height:46px}
#header li a.home{
background:url(menu_01.png) no-repeat left top;52px}
#header li a.homeActive{
background:url(menu_01.png) no-repeat left bottom;52px}
#header li a.gallery{
background:url(menu_02.png) no-repeat left top;60px}
#header li a.galleryActive{
background:url(menu_02.png) no-repeat left bottom;60px}
#header li a.resources{
background:url(menu_03.png) no-repeat left top;76px;
margin:0;padding:0}
#header li a.resourcesActive{
background:url(menu_03.png) no-repeat left bottom;76px}
#header li a.submit{
background:url(menu_04.png) no-repeat left top;97px}
#header li a.submitActive{
background:url(menu_04.png) no-repeat left bottom;97px}
#header li a.feed{
background:url(menu_05.png) no-repeat left top;68px}
#header li a.feedActive{
background:url(menu_05.png) no-repeat left bottom;68px}
#header li a.about{
background:url(menu_06.png) no-repeat left top;52px}
#header li a.aboutActive{
background:url(menu_06.png) no-repeat left bottom;52px}
#header li a.blog{
background:url(menu_10.png) no-repeat left top;51px}
#header li a.blogActive{
background:url(menu_10.png) no-repeat left bottom;51px}
#header li a.contact{
background:url(menu_07.png) no-repeat left top;64px}
#header li a.contactActive{
background:url(menu_07.png) no-repeat left bottom;64px}
#header li a:hover{
background-position:left bottom}

HTML代码

<div style="position:absolute;top:30px;left:10px;
height:70px;overflow:hidden;padding-left:100px;">
<h3>www.865171.cn</h3>
</div>
<div id="header">
<ul>
<li><a class="homeActive" href="http://www.865171.cn/">
<em>home</em></a></li>
<li><a class="gallery" href="http://www.865171.cn/">
<em>gallery entries</em></a></li>
<li><a class="resources" href="http://www.865171.cn/">
<em>resources</em></a></li>
<li><a class="submit" href="http://www.865171.cn/">
<em>submit a site</em></a></li>
<li><a class="feed" href="http://www.865171.cn/">
<em>our feed</em></a></li>
<li><a class="blog" href="http://www.865171.cn/">
<em>blog</em></a></li>
</ul>
</div>