Menu déroulant horizontal en 100%

Bonjour,

voila tout est dans le titre j'aimerais faire un menu qui soit dynamique a savoir ne pas avoir a dimensionner mes blocks tout laisser en 100% car dans ce même menu je peux avoir un ou plusieurs niveaux (ce sera dynamique géré en php) qui eux même peuvent avoir des sous niveaux je ne parviens pas a avoir du 100% sous FF donc voila comment j'ai procédé (je sais beaucoup vont me dire que c'est inadapté) j'utilise un tableau en 100% qui encapsule mes menus (récupéré a partir des tutos du blog d'alsa..pour le code du menu)

Donc ça marche nikel sous IE mais sous FF il n'apprecie pas les tableaux j'ai un décallage sur le hover et mes sous-menus sont affichés avec un décallage qui explose mon menu ....

voici la css :

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position:absolute;
z-index:100;
width: 100%; 
}
#menu dl {
float: left;
width: 100%;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
width: 100%;
}
#menu dd {
display:none;
border: 1px solid gray;
position:relative;
_position:absolute;
width:100%;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
height: 100%;
width:100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

voici le html :

<table id="menu" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
    <td>
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	</td>
    <td>
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	</td>
	<td>
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>
	</td>
    <td>
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>

			</dd>
	</dl>
	</td>
     <td>
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	</td> 
</tr>
</table>

je sais que d'utiliser un tableau engendre des conflits avec FF sur ce type de menu...mais j'ai besoin de faire des menus dynamiques et non avec une taille imposée..si quelqu'un a une solution j'ai cherché pendant pas mal d'heure mais des fois la soluce est a coté de soi...

Merci...
Modifié par Kreat (29 Mar 2006 - 17:12)

Bon la technique classique de reposter pour faire remonter le post
je sais.....
mais personne n'a une idée ??

Si les largurs doivent etre changeantes pourquoi utiliser 100% plutot qu'auto ?

certes mais je cherche juste une solution, par rapport a FF le auto ou le 100% change dans le sens ou l'affichage ne sera pas aussi fluide qu'avec un 100% ce dernier va prendre toute la largeur de mon site (qu'il soit a taille fixe ex 770px ou en 100% ) et c'est ce que je recherche...alors qu'une valeur en auto va juste s'adapter au contenant autant rester avec des valeurs fixes..d'ou mon recours au tableau et mon prb sous FF
Modifié par Kreat (30 Mar 2006 - 17:10)