CSS drop down menu

Everyone is trying Javascript only to create a drop down menu. But here iam showing
a simplest way to create a drop down menu by simple CSS.
HTML

<ul id="drop">
<li><a href="#">Graphic</a>
<ul>
<a href="#"><li>Photoshop</li></a>
<a href="#"><li>Illustrator</li></a>
<a href="#"><li>Indesign</li></a>
<a href="#"><li>CorelDraw</li></a>
<a href="#"><li>Paintshop</li></a>
<a href="#"><li>Pagemaker</li></a>
<a href="#"><li>QuarkXpress</li></a>
</ul>
</li>
<li><a href="#">Web</a>
<ul>
<a href="#"><li>HTML</li></a>
<a href="#"><li>DHTML</li></a>
<a href="#"><li>CSS</li></a>
<a href="#"><li>Javascript</li></a>
<a href="#"><li>PHP</li></a>
<a href="#"><li>AJAX</li></a>
<a href="#"><li>Jquery</li></a>
</ul>
</li>
<li><a href="#">Vsual</a>
<ul>
<a href="#"><li>Avid</li></a>
<a href="#"><li>Premier</li></a>
<a href="#"><li>AfterEffects</li></a>
<a href="#"><li>Combustion</li></a>
</ul>
</li>
<li><a href="#">2d & 3d</a>
<ul>
<a href="#"><li>Toon Boom</li></a>
<a href="#"><li>Flash</li></a>
<a href="#"><li>3d Max</li></a>
<a href="#"><li>Maya</li></a>
</ul>
</li>
</ul>

In above HTML code we created all menu items.
The CSS for drop down menu is following:
CSS

/* all font in the body set */
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/* main menu styles starts */
#drop {
list-style: none;
padding: 0;
margin: 0;
}
#drop li {
font-size: 13px;
font-weight: bold;
float:left;
margin-right: 1px;
}
/* background of all link is set to gradient
text shadow also applied */
#drop li a {
display: block;
width: 100px;
text-align: center;
border: 1px solid #2E619E;
background: #2991DE;
background: -webkit-gradient(linear, lfet top, left bottom, from(#A1C7FF), to(#2991DE));
background: -webkit-linear-gradient(top, #A1C7FF, #2991DE);
background: -moz-linear-gradient(top, #A1C7FF, #2991DE);
background: -webkit-linear-gradient(top, #A1C7FF, #2991DE);
background: -ms-linear-gradient(top, #A1C7FF, #2991DE);
padding: 5px 8px;
text-decoration: none;
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#drop li a:hover {
background: #2991DE;
}
/* main menu styles ends */
/* drop menu styles starts */
/* in first css i hided the drop menu using: left: -9999px;
till mouse over the main menu it is not necessary in page*/
#drop ul {
position: absolute;
left: -9999px;
list-style: none;
padding-left: 0;
}
#drop ul li {
position: relative;
left:0;
font-size: 11px;
float: none;
}
#drop ul a {
display: block;
width: 100px;
text-align: left;
border: 1px solid #8C9CAF;
border-top:0;
background: #AEB8C4;
background: -webkit-gradient(linear, lfet top, left bottom, from(#FFF), to(#AEB8C4));
background: -webkit-linear-gradient(top, #FFF, #AEB8C4);
background: -moz-linear-gradient(top, #FFF, #AEB8C4);
background: -webkit-linear-gradient(top, #FFF, #AEB8C4);
background: -ms-linear-gradient(top, #FFF, #AEB8C4);
padding: 5px 8px;
text-decoration: none;
color: #000;
text-shadow: none;
}
#drop ul a:hover {
background: #C7CCD1;
}
/* drop menu styles ends */
/* the important css to drop down
here i made the drop menu in position again*/
#drop li:hover ul {
position: relative;
left:0;
}

In preceding CSS note that drop down menu (second 'ul') has been
hided using the 'absolute position'(this way seems
better than 'hidden' value of 'visibility'property).
At last it coming in posion when mouse over the main menu.

hope it is helpfull to u :)