纯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>

效果图



涉及到的知识点

浮动

伪类