Problème de menu

Bonjour,

J'espère que quelqu'un pourra m'aider à résoudre mon problème, le voici:

site web: www.capital-first.ch
code: html/css

Je voudrais créé un nouveau menu qui contiendra des sous rubriques (donc lorsqu'on clique sur une rubrique, des sous rubriques apparaissent en dessous). J'ai déjà testé de le faire avec un menu en javascript et css. Cela fonctionne très bien avec Mozilla, par contre ca ne fonctionne pas avec Internet explorer. Les sous-menus n'apparaissent pas.
J'ai testé mon menu dans une page blanche et ca a très bien fonctionné. Je soupçonne que ce soit un problème de niveau (ex. z-index). À mon avis, les sous rubriques passent sous la partie "contenu du site". Mais je dois préciser que je fonctionne en "relative", donc ca complique les choses vu que je n'ai pas de z-index à insérer dans mon code css. Enfin je suis assez perdu...

Voici le code à placer dans le head pour le menu:

<style type="text/css">
#menu {list-style-type:none; margin:0 0 100px 0; padding:0;}

#menu li {display:block; float:left; position:relative; z-index:100; margin-right:50px;}
#menu li span {display:block; z-index:100; padding: 5px 10px;font-size:1.1em;}
#menu li a, #menu li a:visited {display:block; padding:0; white-space:nowrap;}

#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background:transparent url(../opacity/opaque.png);}
* html #menu dl {background:transparent url(../opacity/opaque.gif);}
#menu dt {margin:0; font-size: 1.1em; float:left;}
#menu dd {display:none; background: transparent; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {display:block; color:#000; padding: 5px 10px; text-decoration:none;}
#menu dd a, #menu dd a:visited {color:#000; text-decoration:none; display:block; padding: 5px 10px;}

#menu li a:hover {border:0; text-decoration:underline;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:15px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {color:#c00;}


</style>


voici mon div menu dans mon fichier .css:

div#menu {
float : right;
position : relative;
width : 875px;
height : 55px;
background-color:#660066;
background-color : #666666;
background-position : center;
background-image : url(../images/bgmenu.gif);
background-repeat:repeat-x;
line-height:2;
}


Et voici mon code dans le body, pour le menu:

<div id="menu"><li><span>Accueil</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="https://capitalfirst.ch/">Accueil</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><span>Commerces à vendre</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<br></br>
<dd><a href="1.html" title="Rubrique 1">a</a></dd>
<dd><a href="2.html" title="Rubrique 2">b</a></dd>
<dd><a href="3.html" title="Rubrique 3">c</a></dd>
<dd><a href="4.html" title="Rubrique 4">d</a></dd>
<dd><a href="5.html" title="Rubrique 5">e</a></dd>
<dd><a href="6.html" title="Rubrique 6">f</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>Vendre son commerce</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<br></br>
<dd><a href="1.html" title="Rubrique 11">a</a></dd>
<dd><a href="2.html" title="Rubrique 22">b</a></dd>
<dd><a href="3.html" title="Rubrique 33">c</a></dd>
<dd><a href="4.html" title="Rubrique 44">d</a></dd>
<dd><a href="5.html" title="Rubrique 55">e</a></dd>
<dd><a href="6.html" title="Rubrique 66">f</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><span>Autres services et prix</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<br></br>
<dd><a href="1.html" title="Rubrique 1">a</a></dd>
<dd><a href="2.html" title="Rubrique 2">b</a></dd>
<dd><a href="3.html" title="Rubrique 3">c</a></dd>
<dd><a href="4.html" title="Rubrique 4">d</a></dd>
<dd><a href="5.html" title="Rubrique 5">e</a></dd>
<dd><a href="6.html" title="Rubrique 6">f</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><span>Contact</span>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href="https://capitalfirst.ch/">Contact</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></div>

Sinon, avez-vous d'autres solutions? Tout ce que je souhaite finalement, c'est de mettre un menu horizontal quelqu'onque avec des rubriques et sous rubriques et que l'apparence (couleurs) soit modifiable. Que ce soit en image ou texte. Merci de votre aide.