modifier un menu statiques en un menu dynamique

Bonjour,
J'ai une Template que j'ai trouvé sur le web qui me plait bien pour mon projet PHP, sur cette Template j'ai un menu normale que j'aimerai transformer en menu dynamique (avec liste déroulante sur les click) mais j'aimerai garder le même style du menu (du site) si c'est possible, j'y connais pas grande chose en JS et j'aimerai bien trouver de l'aide sur ce forum, je vous remercie d'avance.

voici le code HTML du menu :

Code:

1
2
3
4
5
6
7
8
9
10
 
<div class="row-1">
               	<ul class="nav">
                  	<li><a href="home.html" class="first">Home</a></li>
                     <li><a href="about-us.html">About Us</a></li>
                     <li><a href="articles.html">Articles</a></li>
                     <li><a href="contact-us.html">Contact Us</a></li>
                     <li><a href="site-map.html" class="last">Site Map</a></li>
                  </ul>
               </div>

le code CSS correspondant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#header .nav {
	padding:22px 0 0 41px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
	#header .nav li {
		display:inline;
	}
 
		#header .nav li a {
			display:block;
			font-size:18px;
			float:left;
			padding:5px 62px 5px 62px;
			color:#fff;
			text-decoration:none;
			text-transform:uppercase;
			background:url(images/divider.gif) no-repeat left top;
		}
		#header .nav li a.first {
			background:none;
			padding-left:0;
		}
		#header .nav li a.last {
			padding-right:0;
		}
 
		#header .nav li a:hover, #header .nav li a.current {
			color:#fa9a87;
			text-decoration:none;
		}