利用XHTML和CSS，我们可以设计出千奇百怪各式各样的导航样式，比如下面的这一种，也是在设计方案中很常见的。
效果图：

制作的难点在于导航的每个项之间不是简单的排列关系，相互之间有边角的重合，对于这个特性，用CSS的Margin负边值加以解决。

#nav li a {
display:block;
background:url(bg.gif) no-repeat left -45px;
width:152px;
height:29px;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
color:#FFF;
text-align:center;
text-decoration:none;
margin:0 0 0 -36px;
padding:8px 20px 0 0;
float:right;
}
#nav li a:hover,#nav li.select a {
background:url(bg.gif) no-repeat left top;
}

完整的示例及代码点击这里下载