logo 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;
}