Problème <dt> et javascript

Bonjour à tous !

Je viens de me mettre au CSS depuis très peu (je l'utilisais que pour mes liens et le texte) et j'avoue que ce n'est pas toujours facil...

Voici mon problème :
- J'ai un menu déroulant qui se fait par l'intermédiaire d'une fonction javascript. Sous Firefox, elle marche impec, sous IE, non. Je vous joins le code ci-dessous. Avez-vous une idée de pourquoi ça ne fonctionne pas ?

- Ensuite, j'ai donc une balise <dt> qui est doté d'un titre donc (qui est censé faire apparaitre le menu lors d'un clic dessus) et dont je n'arrive pas à mettre de puces devant, est-ce normal ? Celà vient-il du fait que seulement <li> et <ul> (ou <ol>) peuvent ?

Voici comme convenu le code...
Si quelqu'un à quelques pistes !
Merci d'avance

javascript:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

Menu html (venant d'alsacréation):

<dl id="menu">
				<dt onclick="javascript:montre('smenu1');">Sites Web</dt>
					<dd id="smenu1">
						<ul>
							<li><a href="#">Moineau Team - Le site</a></li>
							<li><a href="#">Moineau Team - Are We Clever ?</a></li>
							<li><a href="#">Moineau Team - Moineau TV (pass demandé)</a></li>
						</ul>
					</dd>	
				<dt onclick="javascript:montre('smenu2');">Montages vidéos</dt>
					<dd id="smenu2">
						<ul>
							<li><a href="#">Are We Clever ? - Damien</a></li>
							<li><a href="#">Montage 01</a></li>
							<li><a href="#">Montage 02</a></li>
						</ul>
					</dd>
				</dl>

CSS :

/* CSS Menu */
dl, dt, dd {
	margin: 0px;
	padding: 0px;
	list-style-type:square;
}

ul, li {
	padding: 0px;
	margin-left: 10px;
	list-style-image: url(../images/fleche.gif);
}

#menu {
	position: absolute; /* placement du menu, à modifier selon vos besoins */
	top: 50px;
	left: 20px;
	width: 325px;
	text-align: left;
}

#menu dt {
	cursor: pointer;
	padding-top: 5px;
	padding-bottom: 3px;
	text-align: left;
}

#menu li {
	text-align: left;
}

#menu li a {
	color: #666666;
	text-decoration: none;
	display: block;
	height: 100%;
}

#menu li a:hover {
	color: #000000;
	text-decoration: underline;
	background-color: #F5F5F5;
}

Modifié par DachMt (06 Nov 2006 - 15:17)