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