Creating Simple Vertical Css Menu Bar

In My Previous Post (i.e..,on april 04,2007) I Explain U How To Create Simple Css Horitzontal Menu Bar After That I Got Many Mails For Requesting Tutorial On Vertical Css Menu Bar So Here Is Ur Request Friends I Hope This Helps You

Css Code(Place It In Header Part)

<style type=”text/css”>

#verticalmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 180px;
padding: 0px;
margin: 0px;
}

#verticalmenu h1 {
display: block;
background-color:#658CCF;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #ffffff;
text-align:center;
margin: 0px;
width:179px;
}

#verticalmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#verticalmenu ul li a {
font-size: 80%;
display: block;
border:1px dashed #658CCF;
border-bottom: 1px dashed #658CCF;
padding: 5px 0px 2px 4px;
text-decoration: none;
text-align:center;
color: #666666;
width:178px;
}

#verticalmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
font-weight:bold;
letter-spacing:1px;
}

</style>

End Of Css Code

…………………………………………………………………………………………………………………………………………

HTML Code (Place This Code In Ur Body Tag)

<div id=”verticalmenu”>
<h1>MENU BAR</h1>
<ul>
<li><a href=”https://webdesigninfo.wordpress.com”>Home</a></li&gt;
<li><a href=”https://webdesigninfo.wordpress.com/about/”>About Me</a></li>
<li><a href=”https://webdesigninfo.wordpress.com/web-templates/”>Web Templates</a></li>
<li><a href=”https://webdesigninfo.wordpress.com/contact-me/”>Contact Us</a></li>
<li><a href=”https://webdesigninfo.wordpress.com”>Downloads</a></li&gt;
</ul>
</div>

End Of HTML Code

………………………………………………………………………………………………………………………………………….

At The End It Should Like This

Download This File here

Looking for professional css menus for free then visit styledmenus.com