Vandelay Website Design | Custom Web Design

Vertical Green Buttons


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="bottomborder" >Link 6</a></li>
</ul></div>

CSS

#navigation li a {
color: #000000;
text-decoration: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
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: #000000;
border-left-color: #000000;
text-align: center;
background-color: #99CCCC;
}
#navigation {
width: 100px;
}
.bottomborder {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#navigation li {
list-style-type: none;
}
#navigation li a:hover {
color: #000000;
background-color: #55AAAA;
}

Back to CSS Menus Page