Problème menu déroulant CSS / Javascript

Bonjour à tous !
J'ai réalisé un menu déroulant pour un site grâce à votre tuto.
Cependant j'ai quelques petits bugs...
Le menu décale tout le site :
http://imgs.imagup.com/member2/1210599668_Capture.png

Aussi, j'aimerais que lorsque la souris n'est plus sur le menu, il se cache (comme par exemple sur le site rueducommerce.com). Mais j'ai beau chercher, je ne trouve pas comment...

Dites moi si vous avez besoin du code css/html.
Merci d'avance !

Bonjour numerodx,

Pour rappel:

a écrit :

Préambule : ce tutoriel est estampillé "délicat"; Il ne doit pas être considéré comme une référence en la matière car il comporte certains problèmes intrinsèques.

Pour résumer, le menu réalisé à l'aide de ce tutoriel vieillissant ne sera pas exempt de défauts, ni forcément accessible à tous.

As-tu jeter un oeil sur d'autres menu déroulant ?
le menu accordeon
Fayritells
En second lieu, sans ton code (x)html/css au minimum et une page en ligne dans le meilleur des mondes, tu te doutes bien qu'il va être difficile de te répondre efficacement (les boules de cristal ne sont plus ce qu'elles étaient... )

En ce qui concerne ta question sur la disparition du menu, il faudrait lire plus attentivement le tutoriel (en tout cas jusqu'au bout )

a écrit :
Variante : les sous-menus disparaissent
Si vous préférez qu'ils se masquent lorsquela souris les quitte, il suffit d'ajouter le comportement onmouseout= "javascript:montre();" sur les sous-menus (dd) comme le montre le code suivant :

Cdt,
Sylvain

Voici le code js :

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

Mon code css :

#menu,
#menu_bottom {
	z-index:100;
	font-size:14px;
	height:20px;	
	background-image:url("../img/bg_menu.png");
	background-repeat:repeat-x;
	background-position:top;
	padding:5px;
	font-family:"Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	
	clear:both;
	margin:1px 0px;
}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu dl {

	float: left;
	margin: 0 10px;
	color:white;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	border: 0;
	color:white;
}
#menu dd {
	border: 1px solid gray;
}
#menu li {
	text-align: center;
	background: #898989;
}
#menu li a, #menu dt a {

	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	display: block;

}
#menu li a:hover, #menu dt a:hover {
	color:#898989;
	background-color:white;
	height:20px;
}

Et mon code html généré :

<div id="menu">
<dl>
			<dt onmouseover="javascript:montre();"><a href="index.php?p=home" title="Retour à l'accueil">accueil</a></dt>
</dl>

<dl>
	<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"><a href="cat-shop-1-pile.html">PILE</a></dt>
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
		<ul>
				<li><a href="">test</a></li>

				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
			</ul>

		</dd>
</dl>
<dl>
	<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');"><a href="cat-shop-17-pile-bouton.html">PILE BOUTON</a></dt>
		<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
		<ul>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>

				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
			</ul>
		</dd>
</dl>

<dl>
	<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');"><a href="cat-shop-33-pile-rechargeable.html">PILE RECHARGEABLE</a></dt>
		<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
		<ul>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>

				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
			</ul>
		</dd>
</dl>
<dl>
	<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');"><a href="cat-shop-40-chargeur-alimentation.html">CHARGEUR & ALIMENTATION</a></dt>

		<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
		<ul>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>

				<li><a href="">test</a></li>
			</ul>
		</dd>
</dl>
<dl>
	<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');"><a href="cat-shop-47-batterie.html">BATTERIE</a></dt>
		<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
		<ul>
				<li><a href="">test</a></li>

				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
			</ul>

		</dd>
</dl>
<dl>
	<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');"><a href="cat-shop-50-eclairage.html">ECLAIRAGE</a></dt>
		<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
		<ul>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>

				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
				<li><a href="">test</a></li>
			</ul>
		</dd>
</dl></div>

Merci de ton aide !

Problème finalement résolu !

Bonjour numerodx,

C'est parfait alors
Pourrais-tu en faire profiter la communauté, histoire que ce sujet trouve sa conclusion logique ?
J'ai un petit doute concernant le <onmouseout="javascript:montre('');"> sur les dt tout de même

Cdt,
Sylvain

Le probleme venait de mon css.
J'ai juste ajouté position:absolute; dans mon dd. Et ça marche.
Pour le onmouseout, j'ai trouvé la solution sur ce site, sur ce tuto : http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Par contre, j'ai deux petites questions :
- Au chargement de la page, les menus sont déroulé, ça fais pas terrible... Est-il possible de les cacher au chargement ?
- Quand je suis sur la catégorie principale du menu, le background est blanc, mais lorsque je vais sur une des sous-catégories, il reprend sa couleur initiale...

Explications en image :

http://imgs.imagup.com/member2/1210682438_selection1.png
Là c'est bien
http://imgs.imagup.com/member2/1210691498_selection2.png
Là c'est pas bien... (En gros je voudrais que Chargeur & Alimentation reste avec un fond blanc)

Merci d'avance pour votre aide !
Modifié par numerodx (23 May 2008 - 17:19)

Concernant le "onmouseout", je te signalais juste qu'il n'est pas utile de la placer dans les balises "dt", mais uniquement dans les "dd".

Pour le petit soucis au chargement de la page, la lecture du tutoriel dans son entièreté t'aurait donné ce lien vers une variante du menu (fin de tutoriel du lien que tu donnes )

Je te laisse regarder le code

Pour la couleur de survol des sous-menu :

#menu li a:hover {
[#blue]background-color:#fff;[/#]
color:black;
}

Visuellement une couleur différente du fond indique rapidemment à ton visiteur où il se trouve, non ?

Cdt,
Sylvain

a écrit :
Pour la couleur de survol des sous-menu :

#menu li a:hover {
background-color:#fff;
color:black;
}

Visuellement une couleur différente du fond indique rapidemment à ton visiteur où il se trouve, non ?

Oui, oui, le vert clair je veux le garder.
Je veux juste que "Chargeur & Alimentation" reste en blanc, quand la souris est sur une sous-rubrique.
Modifié par numerodx (23 May 2008 - 16:24)

Re,

Peut-être regarder de coté de la pseudo-classes dynamiques ":active"

#menu dt a:active {
background-color:#fff;
color:black;
}

Ou définir une classe "encours" (à placer manuellement ou de façon dynamique sur les dt concernés)

Cdt,
Sylvain
Modifié par 6l20 (23 May 2008 - 17:50)

J'ai essayé avec la classe active, mais cela ne fonctionne que si l'on clique sur le lien...
J'ai aussi essayer avec focus mais ça ne marche pas non plus.

Sinon pour la classe encours je ne sais pas comment l'utiliser

Personne pour m'aider ?
Est-ce que c'est possible au moins d'agir sur un élément, quand la souris passe sur un autre ?...