Verticle List Style Menu
HTML for Verticle List Style Menu
<div class="navcontainer"> <div class="menuhead">Products & Services</div> <ul class="navlist"> <li class="active"><a href="#" id="current">Auto</a></li> <li><a href="#">Home Owners</a></li> <li><a href="#">Boats</a></li> <li><a href="#">Commerical</a></li> <li><a href="#">Personal Property</a></li> <li><a href="#">Claims</a></li> </ul> </div>
CSS for Verticle List Style Menu
.menuhead { margin-top: 0; width: 100%; height: auto; color: #fff; background: #003399 url(images/menu_head.png) no-repeat top left; font-family: "times new roman", sans-serif, verdana, arial; text-align: center; font-weight: bold; font-size: 1.2em; border-bottom: 0px solid #ccc; padding: 3px 0 3px 0; } .navcontainer { background-color: transparent; margin-bottom: 20px; width: 198px; border-top: 0px solid #ccc; } .navlist li {padding: 3px 0; font-weight: bold; font-size: .8em; width:90%; border-bottom:1px solid #ccc; list-style-type:none; margin-left:11px; } .navlist a { padding:10px; color: #888; text-decoration: none; } .navlist li a:hover { font-weight: bold; color: #003399; text-decoration: none; } .active a { font-weight: bold; color: #003399; }