menu déroulant en css

**cisse18** · 29/03/2006, 10h02

bonjour,
Voilà, je souhaite réaliser un menu déroulant. Sui te une recherche sur internet j'ai trouver .Il permet de réaliser un menu déroulant en css sans utiliser du javascript.
En tant que novice je me suis dit:"super", seulement j'ai suivi les instructions mais il ne fontionne pas sous IE (mais ss firefox oui).
Une idée?
merci

voilà mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<html>
<head>
	<title>Sommaire</title>
<style type="text/css">
 
body {behavior: url(csshover.htc);}
div#menu {width: 100px;}
 
/* fond blanc pour le menu */ 
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}
 
/* fond different au survol de la souris pour les sous menu et les "basiques"*/ 
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
 
/* Rajout d'une petite fleche pour les sous menu */ 
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}
 
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}
 
/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:84px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
 
/* la bordure de chaque hauteur a une couleure de survol*/ 
div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
 
 
</style>
</head>
<body>
	<div id="menu">
		<ul class="niveau1">
			<li class="sousmenu"><a href="step1">Step 1</a>
				<ul class="niveau2">
					<li class="sousmenu"><a href="step2">Step 2</a>
						<ul class="niveau3">
							<li><a href="step3">Step 3</a></li>
							<li><a href="step4">Step 4</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li class="sousmenu"><a href="step5">Step 5</a>
				<ul class="niveau2">
					<li><a href="step6">Step 6</a></li>
					<li><a href="step7">Step 7</a></li>
					<li><a href="step8">Step 8</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

**frog43** · 29/03/2006, 10h31

Un collègue avait eu le même problême, il me semble ... Il s'était arrangé en utilisant des classes plutot que des id ... Mais si tu est novise je c'est pas si sa te parle bcp ...

**cisse18** · 29/03/2006, 11h04

ça me parle un peu.
Je ne sais pas trop la différence mais je peux me renseigner.
Ce serait le problème alors?

**frog43** · 29/03/2006, 11h16

C'est possible, je ne suis pas sur a 100% mais je te dit un collègue utilisé des id et IE ne les rekonésé pas ... Il à ensuite utilisé des classe et tout marcher très bien ...

Mais peut être quelqu'un d'autres trouvera une autre solution ...

Tu peut toujours tester la mienne, et si ta besoin d'aide hésite pas ...

Pour commencer :
- un id est unique
-une classe peut représenter différent éléments

Dans ton CSS tu sélectionne ton id avec #, les classes c'est avec un point.

Ex :
html
<div class=pouet ...
css
.pouet{.....}

Voila, bon courage !

**cisse18** · 29/03/2006, 11h23

Ok, alors j'ai peux être un truc bête mais j'ai remplacé mes: " div#menu " par des " div.menu " et j'ai défini menu comme une class. Du coup je n'ai plus de id. Mais ça ne fonctionne pas du moins ça n'a rien changé parce que ça fonctionne sur firefox.
Une autre idée

:

**frog43** · 29/03/2006, 14h08

Ah, mince ... dsl de t'avoir dit une connerie ...

Pour ma part je n'ai pas d'autres idées ... Je vais cheté un coup d'oeil - rapide à ton code ....

Sinon un lien très utile pour les menu comme tu souhaite :

http://css.maxdesign.com.au/listamatic/

**cisse18** · 29/03/2006, 15h37

Ok , je te remercie.J'attends ta réponse je bouge pas

Invité · 29/03/2006, 22h42

Salut, j'ai eu le même problème avec ce code, car je crois le reconnaître, enfin bref, moi j'ai pas réussi à régler le problème, donc j'en ai utilisé un autre...
Mais le menu ne se déroulant tout simplement pas, ce serait pas du à la propriété hover, qui fonctionne sous firefox, et pas sous IE ?

**frog43** · 30/03/2006, 08h09

Je ne pense pas que sa vienne de la, car même sous IE les hover, sur un texte par exemple marche très bien ...

**cisse18** · 30/03/2006, 09h25

J'ai mis l'adresse du site au début de ce sujet, c'est bien tuto.fr. Ce menu déroulant doit pouvoir fonctionner sur IE puisque le créateur du tutoriel lance un aperçu sous IE, mais va savoir pourquoi ça fonctionne sous firefox et pas sous IE. C'est pénible

**cisse18** · 31/03/2006, 11h06

Personne n'a une idée pour résoudre mon problème ou pour le contourner? SVP.

**frog43** · 31/03/2006, 11h21

J'ai pas encor regardé ton code, trop de boulot à coté ... Dans un premier temps tu peut choisir un autre menu ... Yen a qui doivent resembler au tient .... Regarde le lien que je t'ai filé + haut ...

**marsupix** · 31/03/2006, 16h16

IE ne prend les :hover que avec un lien
donc met dans ton menu:

<li><a href="">blabla</a></li>

ensuite la déiffrénce entre class et id:
*_ un ID doit etre unique dans la page (donc si tu as un seul menu, id="menu" était correct.
*_ une class peut être affecté à plusieurs éléments de la page et c'est là son interet.

**cisse18** · 03/04/2006, 16h49

En fait je ne vois pas trop.
Tu me dis de placer dans mon menu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<li><a href="">blabla</a></li>

C'est ce que j'ai fait. J'ai créé des liens.
Là je saisis pas ce que tu me demandes de faire.
Sinon pour ce qui est de la différence entre class et div, j'ai compris.
Merci.

**frog43** · 03/04/2006, 18h49

En fait, apparemment IE ne comprend le hover que si ce dernier est appliqué sur un lien ... D'ou le <a href='' ''>blabla</a> En fait tu cré un lien qui mène nul part ... C'est juste pour faire marcher le hover ...

**SpaceFrog** · 02/06/2006, 13h24

te casse pas avec ce genre de tracasserie ... va faire un tour sur opencube et regarde navstudio ...

**Yogui** · 08/06/2006, 09h12

C'est parfait, merci bien

Mais ça ne me dit pas pourquoi mon bazar ne fonctionne pas :/

**itineric** · 03/04/2006, 22h47

Le problème c'est que "machin:hover" suivi de quelque chose ne fonctionne pas sur IE. Il faut passer par la case javascript pour ce que tu veux faire.

**cisse18** · 04/04/2006, 09h38

Le problème c'est que "machin:hover" suivi de quelque chose ne fonctionne pas sur IE. Il faut passer par la case javascript pour ce que tu veux faire.

Peux tu me donner un exemple, stp?

**John_Smith** · 04/04/2006, 11h17

Regarde cette page:

http://www.uhb.fr/langues/craie/cfttr/ff/cfttr.html

Observe le menu sous Firefox, puis regarde ce qui se passe sous internet explorer. Pour qu'un menu de ce type fonctionne sous ie, pas d'autre choix, c'est du javascript.

L'attribut "hover" ne fonctionne que pour la balise <a> sous ie si je ne me trompe.

menu déroulant en css

CSS

Vue hybride

Discussions similaires

Partager

Partager