Vertical List with Borders, Text Aligned Right
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="#" class="bottomborders" >Link 6</a></li>
</ul></div>
CSS
#navigation li a {
color: #800000;
text-decoration: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666666;
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: #666666;
border-left-color: #666666;
text-align: right;
}
#navigation {
width: 100px;
}
#navigation li {
list-style-type: none;
}
#navigation li a:hover {
text-decoration: none;
color: #800000;
background-color: #DBDBDB;
}
.bottomborders {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
}
