纯css实现垂直导航栏

ul.nav{
	margin:0;
	padding:0;
	width: 8em;
	list-style-type: none;
	background-color: #8BD400;
	border:1px solid #486B02;
	font-size: 2em;
}
/*去掉最后一个li中a的border-bottom*/
ul.nav li:last-child a{
	border-bottom: 0;
} 
/*去掉第一个li中a的border-top*/
ul.nav li:first-child a{
	border-top: 0;
}


ul.nav a{
	display: block;
	line-height: 40px;
	color:#2B3F00;
	text-decoration: none;
	border-top: 1px solid #E4FFD3;
	border-bottom: 1px solid #486B02;
}

ul.nav a:hover,
ul.nav a:active{
	background-color: #6DA203; 
}

<ul class="nav">
			<li><a href="home.htm">Home</a></li>
			<li><a href="home.htm">about</a></li>
			<li><a href="home.htm">our services</a></li>
			<li><a href="home.htm">our work</a></li>
			<li><a href="home.htm">news</a></li>
			<li><a href="home.htm">contact</a></li>
		</ul>

效果图

涉及到的知识点

浮动

伪类