28173 sujets

CSS et mise en forme, CSS3

Menus en cascade avec image au premier niveau seulement

Bonjour,
Je cherche à créer un menu horizontal. Les liens du premier niveau sont des images. J'ai appliqué le rollover suivant le tuto d'alsacréations http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

pour faire les sous niveaux suivants, pour lesquels JE NE VEUX PAS d'image de fond, j'ai récupéré le code décrit ici
http://www.htmldog.com/articles/suckerfish/dropdowns/example/

le résultat prend tournure mais dans le sous menu 1, l'image "on" du menu1 parent s'affiche. Idem, dans le sous menu2 l'image du parent menu2 s'affiche au passage de la souris. J'ai beau chercher, pas possible de trouver comment éviter ça.
Une idée ?

Voici le code simplifié de la page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<style type="text/css">	
 
#menu1 {background: transparent url(../images/menu1.png);}
#menu1 a:hover {background: transparent url(../images/menu1.png) 0 -32px no-repeat;}
#menu2 {background: transparent url(../images/menu2.png);}
#menu2 a:hover {background: transparent url(../images/menu2.png) 0 -32px no-repeat;}
#menu3 {background: transparent url(../images/menu3.png);}
#menu3 a:hover {background: transparent url(../images/menu3.png) 0 -32px no-repeat;}
#menu4 {background: transparent url(../images/menu4.png);}
#menu4 a:hover {background: transparent url(../images/menu4.png) 0 -32px no-repeat;}
#menu5 {background: transparent url(../images/menu5.png);}
#menu5 a:hover {background: transparent url(../images/menu5.png) 0 -32px no-repeat;}
#menu6 {background: transparent url(../images/menu6.png);}
#menu6 a:hover {background: transparent url(../images/menu6.png) 0 -32px no-repeat;}
#menu7 {background: transparent url(../images/menu7.png);}
#menu7 a:hover {background: transparent url(../images/menu7.png) 0 -32px no-repeat;}

#nav, #nav ul {
	float: left;
	width: 1000px;
	list-style: none;
	background: gainsboro;
	padding: 0;
	margin: 0;
}

#nav a {
	display: block;
	width: 142px; height: 32px; 								
	color: white;
	text-decoration: none;
	padding: 0;	margin: 0;	
	background: url();
}

#nav li {
	float: left;
	padding: 0;
	width: 142px; height: 32px;
}
#nav li:hover, #nav li.sfhover {
	color:white;width:142px;
}
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 15em;
	margin: 0;
} 

#nav li li {
	padding: 0;
	width: 15em;
} 
#nav li ul a {
	width: 15em;
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;  
}
#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}


</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[ i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[ i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>

<ul id="nav"> 
<!-- niveau1 -->
	<li id="menu1"><a href="#"></a>
		<ul>
		<!-- niveau2 -->
			<li><a href="#">2-1</a></li>
			<li><a href="#">2-2</a>
				<ul>
				<!-- niveau3 -->			
					<li><a href="#">3-1</a></li>
					<li><a href="#">3-2</a></li> 
				</ul>
			</li>
		</ul>
	</li>
<li id="menu2"><a href="#2"></a>
		<ul>
		<!-- niveau2 -->
			<li><a href="#">2-1</a></li>
			<li><a href="#">2-2</a>
				<ul>
				<!-- niveau3 -->			
					<li><a href="#">3-1</a></li>
					<li><a href="#">3-2</a></li> 
				</ul>
			</li>
		</ul></li> 
<li id="menu3"><a href="#3"></a></li> 	
<li id="menu4"><a href="#3"></a></li> 	
<li id="menu5"><a href="#3"></a></li> 	
<li id="menu6"><a href="#3"></a></li> 	
<li id="menu7"><a href="#3"></a></li> 	
</ul>	

</body>
</html>


merci du coup de main !
Modifié par Misange (14 Feb 2007 - 09:54)
OK pour les balises ur: /url inutiles (quoique que ça n'empechait en rien d'avoir un lien valide). En revanche je suis désolée mais mon niveau en js est insuffisant pour changer le code de façon à ce que le forum n'interprête pas le code js comme une balise html. Il me semblait du reste que le fait de mettre du code entre balises code, /code devait justement empêcher que ce qui est inclus dedans soit interprété.

En attendant mon problème reste entier. Est-ce que quelqu'un a une idée ?
le résultat actuel est visible ici
http://www.excelabo.net/tests/testmenupoissonmodifie2ok.php
Misange a écrit :
OK pour les balises ur: /url inutiles (quoique que ça n'empechait en rien d'avoir un lien valide).
Euh... Si, ça ne renvoyait pas sur la bonne page.
Misange a écrit :
En revanche je suis désolée mais mon niveau en js est insuffisant pour changer le code de façon à ce que le forum n'interprête pas le code js comme une balise html. Il me semblait du reste que le fait de mettre du code entre balises code, /code devait justement empêcher que ce qui est inclus dedans soit interprété.
Il te semblait mal alors. Smiley cligne

Il suffit d'ajouter un espace avant le i (en gros, d'écrire [ i]). Libre à toi de la faire ou non, mais c'est assez illisible pour l'instant.
Modifié par Julien Royer (14 Feb 2007 - 09:28)
Bon maintenant que tout est comme il faut, est-ce que ça aide à trouver une solution ?

J'imagine que j'ai un problème de cascade mal ficelée dans mon code mais j'arrive pas à voir où.
Sujet clos
Aller à