做了一個很基本的垂直導航條：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>導航製作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
ul.nav{
margin:0;
padding:0;
list-style-type:none;
width:8em;
background-color:#8BD400;
border:1px solid #486B02;
}
ul.nav li{
display:inline; //移除IE列表項中上下添加的額外的空間
}
ul.nav a{
font-family:sans-serif;
display:block;
color:#2B3F00;
text-decoration:none;
border-top:1px solid #E4FFD3;
border-bottom:1px solid #486B02;
background:url(img/arrow.gif) no-repeat 5% 50%;
padding:0.3em 1em;
}
ul.nav .last a{
border-bottom:0;
}
ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a{
color:#E4FFD3;
background-color:#6DA203;
}
</style>
</head>
<body>
<ul class="nav">
<li class="selected"><a href="http://www.w3cfuns.com">Home</a></li>
<li><a href="http://www.w3cfuns.com">About</a></li>
<li><a href="http://www.w3cfuns.com">Our Services</a></li>
<li><a href="http://www.w3cfuns.com">Our Work</a></li>
<li><a href="http://www.w3cfuns.com">News</a></li>
<li class="last"><a href="http://www.w3cfuns.com">Contact</a></li>
</ul>
</body>
</html>效果顯示：
在FF中顯示正常，但在IE6中，列表項上下添加了額外的空間，具體解決方法參考：IE6中Li列表項增加空行BUG
參考：《精通CSS高級標準Web解決方案》