How to Design a Nice Vertical Menu with CSS

In this tutorial I would like to teach you how to design a Vertical Menu with the help of little CSS. This is very nice Vertical Menu style tutorial for beginners.

In this Vertical Menu you'll see mouse over effect on sub menus, which is very interesting and you'll always love to learn through out this tutorial.

Here's a image of Vertical Menu that we are going to learn:



















For this I am using following two images with css:








I am using following CSS to design a Vertical Menu:


.main_cont
{
float:left;
width:220px;
background-color:#4d7986;
padding:10px;
}

.menu_top_bg
{
width:223px;
background:url(../grfx/menu_top_bg.gif) repeat-x;
height:22px;
padding-top:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
margin-bottom:1px;
}

.sub_menu ul
{
padding:0px;
margin:0px;
}

.sub_menu ul li
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
line-height:32px;
border-bottom:1px dotted #93bcc3;
list-style-type:none;
text-indent:8px;
}

.sub_menu ul li a
{
text-decoration:none;
color:#FFFFFF;
}

.sub_menu ul li a.selected
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}

.sub_menu ul li a:hover
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}


Use following code to attach above CSS manually to HTML document:

<link href="css/left_menu.css" rel="stylesheet" type="text/css" />

Use following HMTL to get a final result:

<div class="main_cont">
<div class="menu_top_bg">TOP HEADER TEXT</div>
<div class="sub_menu">
<ul>
<li><a href="#" class="selected">Menu Text 1</a></li>
<li><a href="#">Menu Text 2</a></li>
<li><a href="#">Menu Text 3</a></li>
<li><a href="#">Menu Text 4</a></li>
<li><a href="#">Menu Text 5</a></li>
<li><a href="#">Menu Text 6</a></li>
</ul>
</div>
</div>

Now you are done. If you find any difficulty to implement above code please leave a comment.

Related Posts :