http://www.red-team-design.com/css3-dropdown-menu

Here is CSS code:

/* styles for main level (1st level) */
.cssMenu { background-color:#fbde8e; padding:0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; *height:25px; /* for ie7 declaring height of the ul to show background */ }
.cssMenu > li { margin-right:20px; padding:5px; display:inline-block; } /* inline-block will bring all li tags in single line */
.cssMenu li { *float:left; } /*for ie7 because it doesn’t support inline-block*/
.cssMenu li a { text-decoration:none; display:inline-block; }

/* styles for 2nd level */
.cssMenu li:hover { position:relative; background-color:#dabe6f; }
.cssMenu ul.level2 { display:none; }
.cssMenu li:hover ul.level2 { display:block; position:absolute; top:24px; left:0; background-color:#dabe6f; width:200px; }
.cssMenu li:hover ul.level2 li { *float:none; } /* ie7 reseting float to none for 2nd level li tag */
.cssMenu li:hover ul.level2 li a { display:block; padding:3px; color:#fff; }
.cssMenu li:hover ul.level2 li a:hover { background-color:#b80f18; }

Here is XHTML code:

<ul class=”cssMenu”>
<li><a href=”#”>menu item 1</a>
<ul class=”level2″>
<li><a href=”#”>2nd level menu item</a></li>
<li><a href=”#”>2nd level menu item</a></li>
<li><a href=”#”>2nd level menu item</a></li>
</ul>
</li>
<li><a href=”#”>menu item 1</a></li>
<li><a href=”#”>menu item 1</a></li>
</ul>

Code snippet is self explanatory however if someone will have any question or confusion you can post it here, as soon as possible I will try my best to get back along with solution.