Faire disparaître les sous menu

Bonjour, j'a utilisé récemment le menu horinzontal suivant :

http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm

Je voudrais faire en sorte que les sous-menus disparaissent lorsque la souris n'est plus dessus.

En fouillant le forum j'ai trouvé deux posts, le premier avec un lien vers ce site avec ce que je voudrais :

http://site.voila.fr/passionnementfics/histoires.html

et un autre avec une explication :

http://forum.alsacreations.com/topic-23-13737-1-Menu-H--disparition-des-sous-menus.html

Malheureusement, sur ce deuxième post, le site assicié qui montre le résultat n'est pas terrible, le menu s'affiche de façon étrange, j'ai donc un peu peur d'utiliser la contrib.

Y aurait-il une façon fiable de faire disparaitre les sous-menus ?

Merci de votre aide.

Quentin

Bonjour

Suite à ta réponse, voilà ce que j'ai fait...mais je ne pige pas encore très bien alors bon...

Celà à eu comme résultat que mes sous-menus ne s'affichent plus du tout.

<div id="menu" onmouseover="javascript:montre();">
	<dl>
		<dt onmouseover="javascript:montre();"><center><a href="" title="Retour à l'accueil">Accueil</a></center></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><center>Général</center></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="france.php3">France</a></li>
					<li><a href="politique.php3">Politique</a></li>
					<li><a href="economie.php3">Economie</a></li>
					<li><a href="international.php3">International</a></li>
				  </ul>
			</dd>
	</dl>
</div>
<div id="menu2" onmouseover="javascript:montre();">
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><center>Société</center></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="cinema.php3">Cinéma / Théatre</a></li>
					<li><a href="television.php3">Télévision</a></li>
					<li><a href="sport.php3">Sport</a></li>
				  </ul>
			</dd>
	</dl>
	
		<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><center>Technologie</center></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="cinema.php3">Informatique</a></li>
					<li><a href="television.php3">Téléphonie</a></li>
				  </ul>
			</dd>
	</dl>
</div>

<div id="menu3" onmouseover="javascript:montre();">
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');"><center>Pourquoi apropos.com ?</center></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="charte.php3">La Charte du site</a></li>
					<li><a href="pourquoi.php3">Pourquoi ce site ?</a></li>
					<li><a href="nous.php3">Qui sommes nous ?</a></li>
				</ul>
			</dd>
	</dl>
	</div>

Un petit coup de main ?

Au départ donc j'avais ceci pour le dd

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

ce qui en permettait pas de survoler les ss menus

Et cela fonctionne avec ceci

<dd id="smenu6">

http://www.bibliotheques93.fr/

Cependant, il doit falloir vérifier le comportement si java est désactivé dans les préférences que choisit l'internaute (?)

Bienf

Affiche la méthode qd tu l'auras trouvée STP ! Sam intéresse ainsi que d'autres je suppose

Archos a écrit :
Merci j'y suis presque. Par contre, encore un soucis.
Si je met tes CSS tout fonctionne bien...alors je demande. Y a t-il qqchose dans tes CSS qui fait fermer et ouvrir les sous-menu ou est-ce que tout est dans le JS ?

Le js joue sur la propriété display des éléments dl, mais pour pouvoir te répondre il faudrai voir tes CSS

Bienf, tu fait mention d'une autre version un peu plus compliquée que j'ai faite avec une css destinée aux sans js. Le problème est pour expliquer

Ok, alors voici mon CSS...il est un peu long

body {
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 14px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

/* Menu 1 : Accueil - General */
#menu {
position: absolute;
top: 111px;
left: 20px;
z-index:100;
width: 613px;
}
#menu dl {
float: left;
width: 7em;
height: 23px;
margin: 0 1px;
color: #FFFFFF;
}
#menu dt {
cursor: pointer;
height: 23px;
}
#menu li {
text-align: center;
width: 12em;
height: 105%;
background: #333333;
}
#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover {
background: #666666;
}

/* Menu 2 : Societe - Technologies */

#menu2 {
position: absolute;
top: 111px;
left: 225px;
z-index:100;
width: 613px;
}

#menu2 dl {
float: left;
width: 8em;
height: 23px;
margin: 0 1px;
color: #FFFFFF;
}

#menu2 dt {
cursor: pointer;
height: 23px;
}

#menu2 li {
text-align: center;
width: 12em;
height: 105%;
background: #333333;
}

#menu2 li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu2 li a:hover {
background: #666666;
}

/* Menu 3 : Pourquoi ? */

#menu3 {
position: absolute;
top: 111px;
left: 475px;
z-index:100;
width: 613px;
}

#menu3 dl {
float: left;
width: 13em;
height: 23px;
margin: 0 1px;
color: #FFFFFF;
}

#menu3 dt {
cursor: pointer;
height: 23px;
}

#menu3 li {
text-align: center;
width: 12em;
height: 105%;
background: #333333;
}

#menu3 li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu3 li a:hover {
background: #666666;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #FFFFFF;
background-color: #ddd;
padding: 5px;
 
}

J'ai divisé le menu en 3 menus. Parceque lorsque je mettais une width, cela bougeait tout, et les titres plus longs se trouvaient coupés sur deux lignes.. j'ai aussi fais cela pour réduire l'espace entre les cellules.

Et donc voici le menu correspondant :

<div id="menu">
	<dl>
		<dt><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt><center>Général</center></dt>
			<dd>
				<ul>
					<li><a href="france.php3">France</a></li>
					<li><a href="politique.php3">Politique</a></li>
					<li><a href="economie.php3">Economie</a></li>
					<li><a href="international.php3">International</a></li>
				  </ul>
			</dd>
	</dl>
</div>
<div id="menu2">
	
	<dl>	
		<dt>Société</dt>
			<dd>
				<ul>
					<li><a href="cinema.php3">Cinéma / Théatre</a></li>
					<li><a href="television.php3">Télévision</a></li>
					<li><a href="sport.php3">Sport</a></li>
				  </ul>
			</dd>
	</dl>
	
		<dl>	
		<dt>Technologie</dt>
			<dd>
				<ul>
					<li><a href="cinema.php3">Informatique</a></li>
					<li><a href="television.php3">Téléphonie</a></li>
				  </ul>
			</dd>
	</dl>
</div>

<div id="menu3">
	
	<dl>	
		<dt>Pourquoi apropos.com ?</dt>
			<dd>
				<ul>
					<li><a href="charte.php3">La Charte du site</a></li>
					<li><a href="pourquoi.php3">Pourquoi ce site ?</a></li>
					<li><a href="nous.php3">Qui sommes nous ?</a></li>
				</ul>
			</dd>
	</dl>
	</div>

Sinon voici une adresse sur laquelle je teste le site distant.
N'utilisez pas les formulaires please, tout est en test, et les articles sont des copiés collés pour tester

J'ai mis en distant ce que ca me fait en local....ca merde quoi...

http://a-propos.phpnet.org/

Le CSS est celui au dessus.

Archos, avec ta mise en page tableau, il y a trôp à modifier, quand à Bienf, tu as juste à ajouter

onmouseover="montre()"

dans la balise

<div id="corps">

Aie. Mais pourtant quand je ne met que ton css et ton menu, tout fonctionne parfaitement. les tableaux ne posent pas de soucis.

Le miens n'est pas tellement différent il doit juste manquer un petit truc...

Archos a écrit :
Sinon je ne suis pas psychorigide. Tout ce que je veux c'est un menu déroulant.

As-tu une autre méthode à me proposer (a par flash) ? meme hors css.

Tu utilises :
soit le mien sans morceler la liste de définition
et en adaptant le css à tes besoins
; soit celui d'alsacreations ou tu te tournes vers une solution commerciale


Modifié par chmel (03 May 2006 - 09:40)

Bienf a écrit :



Merci mais pourquoi dans

<div id ="corps"> 

?

Parce qu'il est sous les sous-menus

a écrit :
Tu as regardé mon code ?

C'EST FACILE

a écrit :


Bienf