Vertical Buttons with Centered Text
HTML
<div id="navigationcontainer">
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul></div>
CSS
#navigation li a {
color: #FFFFFF;
text-decoration: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
width: 100px;
display: block;
padding: 3px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
text-align: center;
background-color: #004000;
}
#navigation {
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}
#navigation li {
list-style-type: none;
}
#navigation li a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #007900;
}
