Sexy Drop-Down Menu with CSS ~ Web Speaks

CSS can be really helpful if you know it well. You just need to explore its full power. After reading and watching this tutorial, you will have to admit that CSS is more powerful and elegant than it seems.
Here I have created an extremely sexy and beautiful drop down menu using CSS. No JavaScript code has been used. The code works on most of the known browsers including the bad guy IE. If you see any problem with IE(Internet Explorer), please inform me...
Now enjoy the live demo....

Live Demo Download Script

CSS Code

#menu{
margin:0px auto 30px;
height:25px;
padding:5px;
background:#383838;
text-align:left;
border-top:1px solid #4a4d4c;
font-family:Tahoma;
}
#navbarmenu {
width: 960px;
font-size: 12px;
color: #FFF;
font-weight: bold;
margin: 0 auto 0;
padding: 0px auto 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-weight: normal;
text-decoration:none;
margin: 0;
padding: 5px 15px 5px;
}
#nav li a:hover, #nav li a:active {
background:#4a4d4c;
margin: 0;
padding: 5px 15px 5px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #383838;
width: 150px;
color: #FFF;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #4a4d4c;
border-left: 1px solid #4a4d4c;
border-right: 1px solid #4a4d4c;
}
#nav li li a:hover, #nav li li a:active {
background:  #5eb7c3;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul{
left: auto;
}
#nav li:hover{
position: static;
}

<!--[if IE]> <style type="text/css"> #menu li { position:static; } </style> <![endif]-->
<!--Internet Explorer Trancparency fix-->
<!--[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]-->

CSS Code

<html>
<body>
<div id="menu">
 <div id="navbarmenu">
  <ul id="nav">
   <li><a href="http://www.webspeaks.in/">WebSpeaks</a>
    <ul>
     <li><a href="http://www.webspeaks.in/search/label/webdesign">Web Design</a></li>
     <li><a href="http://www.webspeaks.in/search/label/css">CSS</a></li>
    </ul>
   </li>
   <li><a href="http://www.webspeaks.in/search/label/jquery">Jquery</a>
    <ul>
     <li><a href="http://www.webspeaks.in/search/label/Jquery">Jquery</a></li>
     <li><a href="http://www.webspeaks.in/search/label/javascript">Javascript</a></li>
     <li><a href="http://www.webspeaks.in/search/label/Jquery">Jquery</a></li>
     <li><a href="http://www.webspeaks.in/search/label/javascript">Javascript</a></li>
    </ul>
   </li>
   <li><a href="http://www.webspeaks.in/search/label/php">PHP</a>
    <ul>
     <li><a href="http://www.webspeaks.in/search/label/php">PHP</a></li>
     <li><a href="http://www.webspeaks.in/search/label/php">PHP</a></li>
     <li><a href="http://www.webspeaks.in/search/label/php">PHP</a></li>
    </ul>
   </li>
   <li><a href="http://www.webspeaks.in/search/label/facebook">Facebook Apps</a></li>
   <li><a href="http://www.webspeaks.in/search/label/twitter">Twitter Apps</a>
    <ul>
     <li><a href="http://www.webspeaks.in/search/label/twitter">Twitter Apps</li>
     <li><a href="http://www.webspeaks.in/search/label/twitter">Twitter Apps</li>
    </ul>
   </li>
  </ul>
 </div>
</div>

</body>
</html>

Live Demo Download Script