CSS Vertical List Menu

This tutorial shows how to make vertical css drop down menu. In this tutorial, we do not use images or javascript. Just a simple, cross-browser compatible CSS drop down menu.

First we need the HTML code from our menu of the list is just a regular unordered list.

Example:
<div class="menu">
<ul>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="20">Home</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="21">About</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="22">Contact</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="23">Links</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="24">HTML</a></li>
</ul>
</div>

in the example above, I added a menu item called div around the list, I want to do because it helps me remember what a piece of code does what, if I ever will more. So le's add some CSS to the surrounding menu div called the list.

.menu{
width:50px;
padding:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#FFFFFF;
border:1px solid #437E7E; }

Again, this is a nice and easy. Class menu cover the entire width of the div is inside and has a white background with font(Verdana, Arial, Helvetica, sans-serif), font size(12px).

Then we add to the list Style and elements of the list.

.menu li{
list-style:none;
}

.menu ul li a{
display:block;
padding-left:15px;
height:25px;
margin-top:1px;
line-height:25px;
background-color:#F0F7F7;
border-left:10px solid #C7E2E2;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;;
text-decoration:none;
color:#000000;
}

.menu ul li a:hover, .menu ul li .current
{
background-color:#E5E5E5;
border-left:10px solid #CCCCCC;
color:#666666;}

Once again, it's all quite simple, you should be able to understand a little 'skill CSS code.

This results in: