18041 sujets

Questions générales et questions de débutants

Menu horizontal déroulant : cascade

Bonjour a tous,

Je travaille sur un site qui utilise pour une bonne part la source de votre menu horizontal déroulant.
Le code a été travaillé afin de créer un menu en "cascade" avec des "sous-sous" menu.
Tout ceci marche très bien, aussi je voudrais en faire profiter.
Et peut être trouver une solution à un petit bug MSIE sur lequel je planche depuis un bon moment sans trouver de solution :
Le lien dans le sous menu (sous-menu 4.2) permet d'ouvrir le sous-sous menu. Internet Explorer génère un espace sous ce lien sans que je ne trouve de raison a cela (Firefox se conduit très bien). Voici les codes afin que vous puissiez vous rendre compte de tout cela :

html :


<body>
<div id="nav">
<ul id="navigationprincipale">
<a href="#" title="" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();">Menu</a>
<div id="smenu4" class="smenu" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();">
<ul>
<li>
<a href="#" onMouseOver="javascript:show();">Sous menu 4.1</a>
</li>
<li>
<a href="#" title="Ouvrir les sous-menus de la sous-rubrique" onMouseOver="javascript:show('ssmenu3');"  class="ssmenu" >Sous menu 4.2</a>

<!-- sous sous menu  -->
<div id="ssmenu3" class="ssmenu" onMouseOver="javascript:show('ssmenu3');" onMouseOut="javascript:show();">
<ul>
<li>
<a href="#">Sous menu 4.2.1</a>
</li>
<li>
<a href="#">Sous menu 4.2.2</a>
</li>
<li>
<a href="#">Sous menu 4.2.3</a>
</li>
<li>
<a href="#">Sous menu 4.2.4</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</ul>
</div>
</body>


JavaScript :

function montre(id) {
	var d = document.getElementById(id);
		for (var i = 1; i<=7; i++) {
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
	}
	
	function show(id) {
	var d = document.getElementById(id);
		for (var i = 1; i<=7; i++) {
			if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
	}


CSS :


#navigationprincipale, #navigationprincipale li {
margin:0;
padding:0;
list-style:none;
}
 
#navigationprincipale li {float:left;}
 
#navigationprincipale a {display: block; cursor: pointer; font-size:11px; letter-spacing:0px; font-weight:bold; color:black; text-decoration:none;}
 
* html #navigationprincipale li {
	width: 1%;
	overflow: visible;
}
 
*:first-child+html #navigationprincipale li {
	overflow: visible;
}
 
div.smenu {
margin:0;
padding:0 ;
display:none;
position:absolute;
/*top:106px;*/
z-index:1000;
width:190px;
}
 
 
div.smenu ul {
margin:0 ;
padding:0;
padding-bottom:0px;
list-style:none;
border:1px solid #4998D0;
background:#fff;
width:100% !important;
display:block !important;
}
 
div.smenu ul li {
float:none !important;
display:block !important;
margin:0;
 
padding:0;
width:100% !important;
font-size:10px !important;
font-weight:normal !important;
}
 
div.smenu li a {
margin:0;
font-size:10px !important;
font-weight:normal !important;
display:block !important;
margin-top:0px;
padding:5px !important;
/*background:none !important;*/
color:#026094 !important;
text-decoration:none;
text-align:left !important;
}
 
div.smenu li a:hover {
background:#D9EAF4 !important;
color:#000 !important;
}
 
 
 
/* sous-sous menu */
 
div.ssmenu {
margin:-23px 0 0 0;
padding:0 ;
display:none;
position:absolute;
left:191px;
/*top:4px;*/
z-index:1000;
width:190px;
}
 
div.ssmenu ul {
margin:0 ;
padding:0;
list-style:none;
border:1px solid #4998D0;
background:#fff;
}


D'avance, merci pour votre attention
Sujet clos
Aller à