Hi guys, i am new to html and CSS and just trying to add a submenu to the current CSS menu i currently have now.

Link yo website : http://www.campjeunesserichelieu.com...CJR/index.html

Here is my HTML code :

Code:
 <div id="navigaition_panel">
    <div class="nav">
      <ul>
        <li><a href="index.html" class="over">Accueil</a></li>
        <li><a href="about-us.html" >Inscription</a></li>

 ===========================================
              Need to insert Submenu here                         
                          <ul><li>Page1</li></ul>
                          <ul><li>Page2</li></ul>
                          <ul><li>Page3</li></ul>
=============================================

        <li><a href="#">Site</a></li>
        <li><a href="services.html">Média</a></li>
		<li><a href="contact.html">Contact</a></li>
	  </ul>
	  <div class="clear"></div>
    </div>
  </div>

Here is my current CSS :

Code:
#navigaition_panel {clear:both; background:url(../images/nav_gradient.gif) repeat-x 0 0; height:74px;}

.nav {margin:0px; padding:0px 0px 0px 80px;}
.nav ul{margin:0px 0px 0px 0px; padding:0px;}
.nav ul li{
	margin:0px;
	padding:0 1px 0 2px;
	list-style:none;
	text-transform:uppercase;
	float:left;
	color:#fff;
	text-align:center;
	display:block;
	font-size:12px;
	font-weight:bold;
	background-image: url(../images/nav_line.gif);
	background-repeat: no-repeat;
	background-position: 0px 5px;
}
.nav ul li a{float:left; width:auto; margin:0px; padding:29px 30px 30px 40px ; text-decoration:none; color:#303030  ; background:url(../images/menu_bg2.gif) no-repeat 0 0; display:block}
.nav ul li a:hover {float:left; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block; }

.nav ul li a.over{float:left; background:url(../images/menu_bg2.gif )  no-repeat 0 bottom; display:block;}

Any help would be appreciated !!!