CSS水平导航条2——XHTML+CSS导航条
使用一张包含了三个状态的图片来让水平CSS导航条更加美观。
实际效果
使用代码：
使用本CSS导航条代码，需要如下的几张图片。如果图片大小改变，需要更改CSS中的相应属性。
40*60
45*60 
59*60 
54*60 HTML：
<ul id="mainNav">
<li id="thome"><a href="#">Home</a></li>
<li id="tguides"><a href="#" class="selected">Guides</a> </li>
<li id="tmag"><a href="#">Magazine</a></li>
<li id="tarchives"><a href="#">Archives</a></li>
</ul>
CSS：
CSS说明：
- 本导航条使用li 的 display:inline来实现水平导航的效果。#exNav；里也有这个属性，这是为了避免IE5/Win产生Bug。
- a:hover的时候会将背景图片向下移动20px。a:active和当前页链接的背景则会移动40px。
本例子的缺点：
- 图片文字，不能改变大小，而且维护麻烦，需要更新图片。
注意a:hover的背景设置为右半部分背景的开始。
#header {
position: relative;
width: 500px;
height: 30px;
padding: 0;
margin: 3px 0 20px 0;
background: #7FA0B1;
}
#exNav {
position: absolute;
top: 10px;
left: 10px;
list-style: none;
margin: 0;
padding: 0;
height: 20px;
display: inline;
overflow: hidden;
width: 201px;
}
#exNav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#exNav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win */
}
#exNav a:hover {
background-position: 0 -20px;
}
#exNav a:active, #exNav a.selected {
background-position: 0 -40px;
}
#thome a {
width: 40px;
background: url(images/horizontal-nav/home.gif) top left no-repeat;
}
#tguides a {
width: 45px;
background: url(images/horizontal-nav/guides.gif) top left no-repeat;
}
#tmag a {
width: 62px;
background: url(images/horizontal-nav/magazine.gif) top left no-repeat;
}
#tarchives a {
width: 54px;
background: url(images/horizontal-nav/archives.gif) top left no-repeat;
}