18041 sujets

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

Menu déroulant horizontal pb sous IE6

Bonjour à tous!
j'ai réalisé le tuto du menu déroulant horizontal, il marche à merveille sous FF,
j'ai modifié quelques aspect de ce menu.
Je précise que le site est sous SPIP.

Problème:IE!!
L'habillage des parties déroulés du menu ne correspondent pas: ça d'accord, c'est pas grave!
Gros problème: quand on passe la souris sur le titre, son menu se déroule, mais ils disparait très vite lorsque l'on reste dessus. difficile par exemple d'atteindre le dernier article de la liste... peut être enervant à la longue.
je ne vois pas l'erreur dans le code, j'ai fouillé le forum, pas de trace du même problème. d'ailleur les admins ne serait il pas possible de classer les message par tuto?

bref voici le code:

<html>
<head>
		<link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/habillage_perso.css" />
<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="menu">

<BOUCLE_menu(RUBRIQUES) {lang} {par num titre}{id_mot=10}>	
<dl>					
<dt onmouseover="javascript:montre('#DESCRIPTIF');">
			<a href="#URL_RUBRIQUE" >
			[(#TITRE|supprimer_numero|couper{80})]</a>
</dt>

<dd id="#DESCRIPTIF" onmouseover="javascript:montre('#DESCRIPTIF');" onmouseout="javascript:montre('');">

<ul>
	<BOUCLE_sous_menu(RUBRIQUES) {lang}{id_secteur}  {id_mot=15}{par num titre, titre}>
		<li>
			<a href="#URL_RUBRIQUE" >
	[(#TITRE|supprimer_numero|couper{80})]</a>	
		</li>
	</BOUCLE_sous_menu>					
	</ul>	
	<ul>
		<BOUCLE_articles(ARTICLES){lang} {id_rubrique} {id_mot=15}{par num titre, titre}>
			<li>
				<a href="#URL_ARTICLE" >[(#TITRE|supprimer_numero|couper{80})]</a>
			</li>
		</BOUCLE_articles>
	</ul>
</dd>
</dl>
</BOUCLE_menu>		
</div>
</body>
</html>


et la partie css


dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	position:absolute;
	top: 0;
	left: 0;
	z-index:100;
 	width: 770px;/* correction pour Opera */
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	background: #808073;
}
#menu dl {
	float: left;
	margin:0 1px
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	padding-top:4px;
	padding-bottom:4px;
	padding-right:20px;
	padding-left:20px;
}
#menu dt:hover, #menu dt:focus{
	background: #FFB200;
}
#menu dt a{
	color: white;
}
#menu dd {
	display: none;
	border: 1px solid gray;
	position:absolute;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9, #smenu10{
}
#menu li {
	text-align: center;
	background: #D9D2C3;
	text-align:left;
	padding:5px;
}
#menu li a  {
	color: #000;
	text-decoration: none;
	height: 100%;
	border: 0 none;
}
#menu li:hover, #menu li:focus{
	background: #FFD980;
}
#menu li a {
	text-align:left;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	font-weight:bold;
	color:navy;
}

je ne peux pas vous donner le lien du site, c'est pour le boulot, il est donc fermé pour l'instant...
merci pour vos astuces!!
Sujet clos
Aller à