menu déroulant css

**Prisss** · 09/11/2010, 09h05

Bonjour,

je souhaite faire un menu déroulant comme sur ce tuto : http://css.developpez.com/tutoriels/menu-deroulant/

j'ai recopier le code en html et css pour obtenir le même résultat que sur le tuto, mais je n'ai que le menu parent qui s'affiche et le sous menu ne s'affiche pas. (j'ai gardé la même chose que sur le tuto pour essayer de faire le menu je changerai après les couleurs etc).

mon code html :

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
<html>	
	<head>
		<title>essai</title>
			<link rel="stylesheet" type="text/css" href="feuilledestyle.css">
	</head>
 
<body>
 
<ul id="menuDeroulant">
 <li>
	<a href="nv_accueil.html">Accueil</a>
	<ul class="sousMenu">
		<a href="#">nouvel accueil</a>
	</ul>
 </li>
 <li>
	<a href="savfaire.html">Notre Savoir Faire</a>
		<ul class="sousMenu">
			<li><a href="telephonie.html">Téléphonie</a></li>
		   <li><a href="donnee.html">Données</a></li>
		   <li><a href="image.html">Images</a></li>
		   <li><a href="controle_acces.html">Contrôle d''accès</a></li>
		   <li><a href="electricite.html">Electricité</a></li>
		</ul>
 </li>
 <li>
	<a href="exp_ana.html">Expertise/Analyse</a>
		<ul class="sousMenu">
			<a href="#">nouvelle expertise</a>
		</ul>
 </li>
 <li>
	<a href="moyen.html">Nos Moyens</a>
		<ul class="sousMenu">
			<a href="#">Nouveau Moyen</a>
		</ul>
 </li>
 <li>
	<a href="ref.html">Nos Références</a>
	  <ul class="sousMenu">
	       <li><a href="part.html">Nos Partenaires</a></li>
	       <li><a href="real.html">Nos Réalisations</a></li>
	  </ul>
 </li>
  <li>
	<a href="contact.php">Contact</a>
		<ul class="sousMenu">
			<a href="#">Nouveau contact</a>
		</ul>
 </li>
</ul>

et mon css :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
body
{
 font: 11px comic sans ms, sans-serif;
 background: #AFA99B url("fond.jpg") top left no-repeat;
 margin: 0;
 padding: 0;
}	
 
#menuDeroulant
{
 width: 0px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: absolute;
 top: 0;
 left: 0;
}         
 
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}
 
 
 
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}			
 
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
 
#menuDeroulant li
{
 float: left;
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
}	
 
 
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}

qu'est-ce que j'aurai du faire ou ne pas faire ?

par ailleurs cette ligne je ne l'ai pas mise peut-être pour cela que ca ne fonctionne pas mais je ne sais pas ou là mettre =/ :

Code :

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

#menuDeroulant li:hover > .sousMenu { display: block; }

et autre chose, le sous menu ne sert que pour 2 catégories (nos myens et pour références) j'ai mis des "<ul>" aux autres pour voir si c'était ca qui ne faisait pas fonctionner le sous menu.

merci

**Bisûnûrs** · 09/11/2010, 10h51

Encore une fois, je te conseille de mettre un DOCTYPE à ton document. C'est la première chose à faire avant tout développement HTML.

Et oui, c'est parce qu'il manque cette ligne que ça ne fonctionne pas. Il te suffit de la mettre à la fin de ton fichier CSS.

**Prisss** · 09/11/2010, 11h03

ah d'accord merci =)

par contre le menu je l'ai mis en vertical car c'est ce que je veux mais le menu déroulant s'affiche verticalement sous sous parent est il possible de le mettre a coté du menu ?

et ce fichier là c'est juste en essai c'est pour cela qu'il n'y a pas de doctype, pour éviter de créer des problèmes dans mon code je préfère créer un autre fichier externe et je l'insère ensuite dans mes "vrai" fichier.

menu déroulant css

CSS

Vue hybride

Discussions similaires

Partager

Partager