Menu déroulant Horizontale plusieurs contraintes ....

Bonjour,

J'ai réalisé un menu suite au tuto >>ICI<< et je me trouve confronter par plusieurs p'tit problèmes qui sont :

1) Accés des sousMenu sous IE6 ( dès que je souhaite accéder au sous menu, il se referme aussitôt).
- Peut-on ajouter un delais pour la fermeture des sousmenus losque le curseur de la sourie les quittes ? a voir dans le js je pense avec un delay: 700ms

3) Et la serise pour le gâteau, j'aimerai que le menu soit par dessus ma page, mais lorsque les sous rubrique s'ouvre cela se décale dans ma page XHTMl CSS.

4) Comment faire lorsque le titre du sous menu et long et donc occupe 2 lignes, si je déclare une hauteur fixe dans le "#menu li" la seconde ligne viens par dessus la première du dexieme sousMenu ? Cel fonctionne bien sous IE6, mais pas sous IE7, FireFox 1.5.0.9, Opéra 9.10

J'ai trouvé comment pouvoir faire que ma cellule du menu s'adapte au titre si il est trop long et donc se place sur 2 ligne, j'utilise un "height: 100%;" mais j'aimerai savoir si on peux spécifier un hauteur minimun de 18px par exemple, comment faire ?

le HTML :

<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1;</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
					<li><a href="http://www.monSite.com">sousMenu 2</a></li>
					<li><a href="http://www.monSite.com">sousMenu 3</a></li>
					<li><a href="http://www.monSite.com">sousMenu 4</a></li>
					<li><a href="http://www.monSite.com">sousMenu 5</a></li>
					<li><a href="http://www.monSite.com">sousMenu 6</a></li>
					<li><a href="http://www.monSite.com">sousMenu 7</a></li>
					<li><a href="http://www.monSite.com">sousMenu 8a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">menu 2</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
					<li><a href="http://www.monSite.com">sousMenu 2</a></li>
					<li><a href="http://www.monSite.com">sousMenu 3</a></li>
					<li><a href="http://www.monSite.com">sousMenu 4</a></li>
					<li><a href="http://www.monSite.com">sousMenu 5</a></li>
					<li><a href="http://www.monSite.com">sousMenu 6</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">menu 4</dt>

			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
					<li><a href="http://www.monSite.com">sousMenu 2</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">menu 5</dt>

			<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu6');">menu 6</dt>
			<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://www.monSite.com">sousMenu 1</a></li>
				</ul>
			</dd>
	</dl>
</div>

le css :

/* CSS Document menu index */

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 118px;
}
#menu dt {
cursor: pointer;
text-align: left;
height: 20px;
line-height: 20px;
padding-left: 20px;
font-family: Arial;
font-size:11px;
color: #FFFFFF;
background-image: url(../menu_Bg.jpg);
/*background: #2F406C;*/
border: 1px solid #E6E6E6;
margin: 1px;
}
#menu dd {
display: none;
background-color: #2F406C;
}
#menu li {
text-align: left;
background: #fff;
border-top: 1px solid #E6E6E6;
height: 16px; /* hauteur des sousMenus */
}
#menu li a, #menu dt a {
font-family: Arial;
font-size:11px;
color: #FFFFFF;
background-color: #2F406C;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
padding-left: 5px;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #990101;
}
#site {
position: relative;
z-index: 101;
top : 70px;
left : 10px;
color: #FFFFFF;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

Le js :

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';}
}

Merci pour votre aide !!!

<modération>Le même sans la couleur rouge, pour la lisibilité </>
Modifié par Julien Royer (14 Feb 2007 - 00:25)

J'ai pas toucher au couleur du texte pour le code si tu parles de cela, c'est celle d'origine !!

Aucune aide !!!!