28173 sujets

CSS et mise en forme, CSS3

[Résolu]Pb menu déroulant en CSS et XHTML horiz :

Bonjour à tous,

J'ai réalisé mon menu déroulant à partir du tuto Un menu déroulant en CSS et XHTML. Je l'ai adapté à mon cas : site lageur fixe centré.
Tous est Ok sauf si je mets le comportement onmousseout.

Sur IE avec ce comortement, il est impossible de survoler et cliquer sur certain liens dles sous menus qui disparaissent.

Mon site : http://matboulanger.free.fr/
Je n'ai mis le comportement onmousseout que sur le sous menu 2 (les relevés).

j'ai tout essayé je crois : les z-index. Même en ôtant tout le contenu du site sauf les menus....

Code :
/* CSS Document */
body {
	font-family:Verdana, Arial, Helvetica, sans-serif ; 
	font-size: 76% ; 
	background-color:#FFFFFF; 
	color: #666666; 
	margin:0; 
	border: 0;
	padding:0;
	line-height:1.3em;
	}
#conteneur {
	position:relative;
	top:0px;
	margin-left:auto;
	margin-right:auto;
	width: 750px;
	border : 0;
	margin : 0 auto 0;
	padding : 0px;
	text-align: left;
	background: #FFFFFF;
	}
#head{
	border : 0;
	margin : 0;
	padding : 0;
	height:140px;
	width: 100%;
	position:relative;
	background : #B189E8 url(../photos/logo.jpg) 50% 50% no-repeat;
	}
#footer{
	width: 100%;
	color:#FFFFFF;
	text-align: left;
	position:relative;
	background : #B189E8;
	padding : 5px 0 5px 0;
	}
.col_unique{
	padding :0px 10px 0px 10px;
	border:0;
	margin:0px auto 0px auto;
	width:730px;
	z-index:10;
	}

.separation {
	clear:both;
	visibility:hidden;
	margin:0;
	padding:0;
	}
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
        }
#backgrd_menu {
	background-color:#5F4B7B;
	height:25px;
	padding:5px 0 0 0;
	}
#conteneur_menu{
	width : 750px;
	margin : 0 auto auto;
	color:#FFFFFF;
	}
#menu {
	height:25px;
	color:#FFFFFF;
	padding:5px 0px 0px 0;
	position:absolute;
	top:140px;
	z-index:100;
	}
#menu dl {
	float: left;
	width: 12em;
	}
#menu dt {
	cursor: pointer;
	text-align: center;
	background: #5F4B7B;
	margin: 1px;
	}
#menu dd {
	display: none;
	border: 1px solid gray;
	}
#menu li {
	text-align: center;
	background: #fff;
	}
#menu dt a {
	color:#FFFFFF;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	}
#menu li a {
	color:#FF9C00;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: #FF9C00;
	color:#FFFFFF;
	}
#site {
	position: absolute;
	z-index: 1;
	width:100%;	
	top : 170px;
	background-color:#FFFFFF;
	padding: o;
	margin:0;
	border:0;
	}


et le code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Les Boulanger.com</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

-->
</style>

<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>

</head>
<body>
<div id="head"> <!--début de div head -->
</div> 
<!--fin de div head -->
<div id="backgrd_menu">
<div id="conteneur_menu">
<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Les Boulanger</dt>

		<dd id="smenu1" onmouseover="javascript:montre('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>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Les relevés</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Votre compte</dt>
			<dd id="smenu3" onmouseover="javascript:montre('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>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Contact liens</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<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>
	</div> 
<!--fin de div menu -->
  </div>
</div>
<div id="site">
<div id="conteneur"> <!--début de div conteneur -->
<div class="col_unique"> <!--début de div col_unique -->
<h1 class="text_titre">Bienvenue dans un espace regroupant des donn&eacute;es g&eacute;n&eacute;alogiques<br />
relatives aux BOULANGER originaires de Picardie.</h1>
</div> <!--fin de div col_unique -->
<div class="col_unique" align="center" >  <!--début de div col_unique -->
<img src="../photos/Cordon-dunaire.jpg" alt="Cordon dunaire" title="Cordon dunaire"/></div> <!--fin de div col_unique -->
</div> <!--fin de div conteneur -->

<div id="footer">  <!--début de div footer -->
<div class="col_unique"> <!--début de div col_unique dans footer -->
Pied de page</div> <!--fin de div col_unique dans footer -->
</div>  
<!--fin de div footer -->
</div>
</body>
</html>


Merci por toutes vos remarques .... à n'imrte quel niveau !!
Modifié par petitdegrieux (04 Apr 2006 - 23:38)
Modérateur
bonjour,

je viens de modifier un peu ce menu pour qu'il se referme, en ajoutant un 'timer', ce qui laisse le temps de passer d'une <li> a la suivante sans que IE referme le menu.
<script type="text/javascript">
<!--
window.onload=montre;
window.onload=recache;
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';}

}


function affiche(id){ 
clearTimeout(timeout);// on arrete le timer
montre(id);
} 


function recache(){
timeout = setTimeout('montre()',100);// on demarre le timer avec onmouseout
} 
// ]] --> </script>


et dans le menu :
 extrait ... <dt onmouseover="javascript:affiche('smenu1');">Articles</dt>
			<dd id="smenu1" >
				<ul  onmouseover="javascript:affiche('smenu1');" onmouseout="javascript:recache();">
					<li><a href="#">Rapports de matchs</a></li>
					<li><a href="#">Brèves</a></li>
					<li><a href="#">Infirmerie</a></li>

				</ul>
....


voila si cela peut te suffire Smiley smile

++
Merci ! une réponse rapide et très efficace.
Je viens de le tester rapidement mais si j'ai un problème je te ferai signe !

Merci encore
Sujet clos
Aller à