Simple CSS Drop Down Menu

For start up, I’ve decided to provide simple css based drop down menu which is very common and very difficult on the same time because lot of people uses too many unnecessary styles.

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.