Faire un menu (comme sur comment sa marche)

Bonjour,

J'ai un petit problème dans écriture de mon site je cale a une chose: Faire des sous menu a mon menu qui se développerait au passage de la souris.

Alors je me suis renseigner (oui j'ai regarder sur google)et il faudrait touchez au fichier CSS et html et faire du java scripte et tout alor je suis un peut perdu :s

HTML==>Pour mettre mes sous menus
CSS===>Pour qu'il s'affiche au passage de la souris et changer la couleur par la meme occasion

Alor vous allez me dire "ben c'est bon ta tout ta plus qu'a le faire :)"

Oui mais j'y arrive pas :s:s

Alor je me demandais si vous pouriez pas m'aider voici mes codes:

Le html avec le menu et les sous menus:
[quote]</!--></!--></!--> </div>
</div>
</div>
</div>
<div id="navcontainer">
<div id="nav">
<ul id="navlist">
<li><a href="accueil.htm">Accueil</a></li>
<ul>
<li><a href="fonctionnement.htm">Fonctionnement</a></li>
<li><a href="contact.htm">Proposer un Tuto</a></li>
<li><a href="contact.htm">Me contacter</a></li>
<li><a href="livre.htm">Livre D'or</a></li>
<li><a href="legal.htm">Legal</a></li>
</ul>
<li><a href="internet.htm">Internet</a></li>
<ul>
<li class="active"><a href="routeur.htm">Routeur</a></li>
<li class="active"><a href="messagerie.htm">Méssagerie instentannée</a></li>
<li class="active"><a href="navigateur.htm">Navigateur</a></li>
<li class="active"><a href="securiter.htm">Sécuriter</a></li>
<li class="active"><a href="telechargement.htm">Téléchargement</a></li>
</ul>
<li><a href="logiciel.htm">Logiciel</a></li>
<ul>
<li><a href="bureautique.htm">Bureautique</a></li>
<li><a href="web.htm">Web</a></li>
<li><a href="gravure.htm">Gravure</a></li>
<li><a href="image.htm">Image/Retouche</a></li>
<li><a href="multimedia.htm">Multimédia</a></li>
<li><a href="sauvegarde.htm">Sauvegarde</a></li>
<li><a href="systeme.htm">Systeme exploitation</a></li>
<li><a href="antivirus.htm">Antivirus</a></li>
</ul>
<li><a href="materiel.htm">Materiels</a></li>
<ul>
<li><a href="bios.htm">Bios</a></li>
<li><a href="composant.htm">Composant</a></li>
</ul>
<li><a href="montage.htm">Montage</a></li>
<ul>
<li><a href="mise.htm">Mise en route</a></li>
<li><a href="packs.htm">Packs</a></li>
</ul>
<li><a href="reseaux.htm">Réseaux</a></li>
<ul>
<li><a href="domes.htm">Reseaux domestiques</a></li>
<li><a href="wifi.htm">Reseaux Wi-Fi</a></li>
</ul>
</ul>
</div>
</div>
<div id="container">
<div id="content">
<div id="left">
/quote

Et mon CSS :
[quote]

body {
padding:0;
margin:0;

background-color:#666666;
color:#444444;
font:12px "Trebuchet MS" ;
text-align: center;
}

#wrapper {
margin:0;
padding:0;
background: #666666 url( bg.jpg ) repeat-y ;
background-position:top center;
}

#header-wrapper {
margin:0;
padding:0;
height:205px;
background: #fff url(header-bg.jpg) repeat-x ;
margin-left: auto;
margin-right: auto;
}

#header {
width:838px;
height:205px;
background: #666666 url(header.jpg) ;
background-position: 0px 0px ;
margin-left: auto;
margin-right: auto;
}

#header-content {
padding-top:40px;
text-align:left;
width:800px;
margin-left: auto;
margin-right: auto;
}

#title {
text-align:left;
height:112px;
font:26px Arial;
color:#000000;
margin-left: auto;
margin-right:auto;
padding-left:10px;
}

#topRight {
float:right;
margin-right:20px;
margin-top:-25px;
}

#container {
text-align:left;
width:838px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
}

#content {
background-color : #FFFFFF ;
margin-left:34px;
margin-right:36px;
}

#footer-wrapper {
padding:0;
margin:0;
margin-left: auto;
margin-right: auto;

background: #666666 url(footer-bg.jpg) repeat-x ;

}

#footer {
margin:0;
padding:0;
height:80px;
text-align:center;
margin-left: auto;
margin-right: auto;

background: #666666 url(footer.jpg) no-repeat 50% 0 ;

}

#footer-content {
font : 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF ;
text-align:center;
margin-left: auto;
margin-right: auto;
width:800px;
}

#footer-content a:link, #footer-content a:visited {
font : 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF ;
padding-right:20px;
padding-left:20px;
text-decoration:none;
}

p, div, td {
color:#444444;
font:12px "Trebuchet MS" ;
}

p {
text-align:justify;
}
h1 {
font:24px Arial black;
color:#888888;
}
h2 {
font:22px Arial black;
color:#ACACAC;
}

h3 {
font:18px Arial black;
color:#444444;
}

.clear {
clear:both;
}

#navcontainer {
width:838px;
height:26px;
margin-left: auto;
margin-right: auto;
}

#nav {
background : #AAAAAA url(tab-bg.jpg) repeat-x ;
height: 26px;
margin-left:19px;
margin-right:21px;
}

ul#navlist {
text-align:left;
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}

ul#navlist li {
text-align:center;
width:120px;
float: left;
font: bold 11px/1.5em Verdana;
font-weight: bold;
margin: 0;
padding: 4px 0 4px 0;
background: #fff url(tab-bg.jpg) repeat-x ;
border-right: 1px solid #FFF;
}

#navlist a, #navlist a:link {
margin: 0;
padding: 3px 9px 3px 9px;
color: #EEEEEE;
text-decoration: none;
}

ul#navlist li#active {
background-position:100% -42px;
}

ul#navlist li#active a:link {
color: #444444;
}

ul#navlist li#active a:visited {
color: #444444;
}

#navlist a:hover {
color: #FFD400;
}

div#left {
float:left;width:68%;;margin-top:20px;
}

div#right {
float:right;width:30%; margin-top:20px;
}

.box {
background: url(box-header-bg.jpg) repeat-x ;
}

.box div {
background: url(box-header-bg.jpg) repeat-x ;
font-size: 1.3em;
color:#888888;
padding-left:10px ;
padding-top: 2px ;
}

.box p {
padding-left: 10px;
padding-right: 10px;
color:#777777;
}

/quote

Voila merci de m'aider :)