CSS垂直导航条1——XHTML+CSS导航条
用CSS实现的简单的垂直导航条。宽度和高度都固定，消除了图片下载延迟的现象。
实际效果
使用本代码
需要一张下面这样的图片，再在CSS中修改a的宽度和高度。
本例子的缺点
- 宽度高度都是固定的，没有灵活性。
本例子的优点
- 链接的两个状态只使用一张背景图片，可以消除延迟现象。
HTML:
<ul id="exNav">
<li class="first selected"><a href="../../../index.html">Home</a></li>
<li><a href="../../../about/index.html">About</a></li>
<li><a href="../../xhtml.html">XHTML</a></li>
<li><a href="../../css.html">CSS</a></li>
<li><a href="http://bbs.blueidea.com/index.php">Blueidea</a></li>
<li><a href="http://www.alistapart.com/">ALA</a></li>
</ul>
CSS：
CSS中值得注意的是以下几点：
- 我们不是定义li的样式，而是定义li里嵌套的a。
- 要给a定义display:block，这样可点击区域才能和图片一样大。
- a的line-height 和 height要一样，这样就可以实现垂直居中。
- a的高度是背景图片高度减去1。这样才能确保上下边框不会重叠，定义background: ……left bottom就能使上面的一像素边框被隐藏。而.first a 设置为40px，这样边框就会显示出来。
ul#exNav {
font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 1.6em;
margin: 0;
padding: 0;
list-style-type: none;
}
ul#exNav li {
display: inline: /* :KLUDGE: Removes large gaps in IE/Win */
}
ul#exNav li a {
display: block;
width: 200px;
height: 39px;
line-height: 39px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom;
text-indent: 50px;
text-transform: uppercase;
}
ul#exNav li a:hover,ul#mainNav li .selected a {
background-color: #369;
background-position: right bottom;
color: #fff;
}
ul#exNav .first a {
height: 40px;
line-height: 40px;
}