Vertical Menu

Having coding for vertical menu design:



and its look :



Creating a file called menu_category.css :
code menu background

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

its look is changed a bit different



Using these code t0 change the name : NAVIGATION

#vertmenu h1 {
display: block;
background-color:#F9C;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

Removing all bullets by :

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#vertmenu ul li {
margin: 0px;
padding: 0px;
}

Making buttons and changing text style for menu:

#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

Making a colour hover and colour texts for navigation buttons

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #ffffff;
background-color: #F9C;
}