Add drop done to existing menu

I have a menu but now need to add some drop menu here and there. How do I add it. This is my code.

[code=html]<div id=”nav”>
<ul>
<li><a href=”#”>Home</a> </li>

<li><a href=”#”>Events</a></li>
<li><a href=”#”>Provences</a></li>
<li><a href=”#”>Rules</a></li>
<li><a href=”#”>Gallary</a></li>
<li><a href=”#”>Links</a></li>
<li style=”border: medium none ;”><a href=”#”>Contact Us</a></li>
</ul>
</div>[/code]

[CODE]#nav{width:896px; float:left; padding:10px 15px 0px; height:29px; background:url(../images/nav-bg.jpg) top repeat-x;}

#nav ul{margin:0px; padding:0px; list-style-type:none; float:left; display:inline;}

#nav ul li{float:left; padding:0px 17px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; line-height:18px; border-right:1px solid #b31217;}

#nav ul li a{float:left; padding:0px 22px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000000; line-height:18px; text-decoration:none;}

#nav ul li a:hover{float:left; padding:0px 22px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#b31217; line-height:18px; text-decoration:none;}[/CODE]

Thank you.

Also in #CSS _↴