Create a nice, attractive, and simple drop menu using HTML/CSS and JQuery

Create a simple and attractive looking drop down menu using HTML/CSS and JQuery with very less code.

First, lets create a html code for the menu, code looks like this:
[html]


[/html]

Without any css code the above html code result will be like this.
NO CSS/Jquery HTML menu

Now add this css code to make main menu align side by side and remove bulletin icons.
[css]
ul.mainmenu li {
float:left;
list-style:none;
}

ul.submenu li{float:none;}
[/css]

Now make menu look more appealing, with colors and shades. Modify css code like this:
[css]
ul {

box-shadow:0 0 10px #222;
border-radius:10px;}

ul.mainmenu li {

margin-right:50px;
text-align:center;
font-family:”Gill Sans”, “Gill Sans MT”, “Myriad Pro”, “DejaVu Sans Condensed”, Helvetica, Arial, sans-serif;
font-size:36px;
float:left;
list-style:none;
}

ul.submenu li{
float:none;
font-size:18px;
}

ul.mainmenu{
height:60px;
display:inline-box;
margin:0 auto;
overflow:visible;
color:#DDD;
background-color:#006;
width:570px;
text-align:center;
}

.submenu{
background-color:#333;
}
[/css]

Now It must be looking similar to this.
menu with css

Now lets start JQuery, We will first hide the sub menu by default.

it will look like this,
3

Now we will add more Javascript code to give hover effect. Add the jquery code below to make it happen.

the final javascript must be like this:

Now the menu should be totally working. Try it.

You can download the file from here. http://fiw.me/lE7Z0