menu déroulant en css

Version imprimable

Bonjour,
j'essaye de faire un menu deroulant avec du CSS j'ai deja reussit avec "display"
le probleme est que je n'arrive pas a réafficher mon menu.

je n'ai pas preciser le type de CSS je ne le connais pas.

je vous montre mon bout de code du menu puis du css:
Code:

1 2 3 4 5 6 7 8 9 10 <div id="menu"> <div class="sous_menu"> <span class="menu">DVD </span><br/> <ul> <a href="acceuil.php?select=action">Action</a><br/> <a href="acceuil.php?select=fantastique">fantastique</a><br/> <a href="acceuil.php?select=horreur">horreur</a><br/> </ul> </div> </div>
code css
Code:

1 2 3 4 5 6 7 8 9 ul /* on masque */ { display: none; } .menu:hover ul/*on affiche le contenu du menu quand on le survol*/ { display: block; }
merci d'avance pour votre aide
j'ai tourner le code dans tout les sens mais je ne trouve pas

27/03/2010, 14h26
dariumis

Salut pour faire ce genre de choses il vaut mieux utiliser du javascript^^.
27/03/2010, 14h29
darkterreur

merci pour ta réponse effectivement je sais qu'il existe cette méthode mais elle est bien plus compliquer je ne l'ai pas comprise.
27/03/2010, 21h59
12monkeys

Bonsoir

Citation:

Envoyé par dariumis

Salut pour faire ce genre de choses il vaut mieux utiliser du javascript^^.

:nono: mouais le CSS sais très bien le faire et il n'y aura pas de problème de désactivation de javascript

@darktererur tu as un tutoriel qui t'expliquera en détail comment le faire en CSS ici : http://css.developpez.com/tutoriels/menu-deroulant/
29/03/2010, 12h45
darkterreur

Bonjour,
merci pour le tuto , il correspond aux différent tuto trouver sur le net,
cependant je ne comprend pas pourquoi mon menu n'affiche pas mon menu déroulant lors du passage. car d'après se que je lis mon code parait bon.

merci de m'éclairer.
29/03/2010, 19h54
12monkeys

Dans ton code HTML tu fais référence à l'id menu et dans ton code CSS tu fais référence à une classe menu car le point correspond à une classe. Pour l'id il faut utiliser le dièse #...
30/03/2010, 22h15
darkterreur

Merci pour ta réponse,
c'est effectivement a la classe que je fais allusion je cache le <ul> et je veux que quand je survole le titre dvd donc la class menu, la <ul> se dévoile.

C'est ce qui me parait le plus logique et ce qui correspond le plus au tutoriaux que j'ai rencontré.
30/03/2010, 23h00
12monkeys

Bonsoir

Ta réponse me fait douter de ce que tu as compris ce que je voulais te dire.

Il faut remplacer dans ton code

Code:

.menu:hover ul

par

Code:

#menu:hover ul

Bonjour,
merci pour cette reponse,
effectivement cela apporte un mieux, mon menu se déroule mais dans l'intégralité, c'est a dire que j'ai ceci
Code:

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 <div id="menu"> <div class="sous_menu"> <span class="menu">Viniles </span><br/> <ul class="test"> <a href="acceuil.php?choix=metal">Métal</a><br/> <a href="acceuil.php?choix=rock">Rock</a><br/> <a href="acceuil.php?choix=rockabilly">Rockabilly</a><br/> <a href="acceuil.php?choix=rock_roll">Rock'n Roll</a><br/> <a href="acceuil.php?choix=variete_francaise">Variété Francaise</a><br/> </ul> </div> <div class="sous_menu"> <span class="menu">DVD </span><br/> <ul> <a href="acceuil.php?select=action">Action</a><br/> <a href="acceuil.php?select=fantastique">Fantastique</a><br/> <a href="acceuil.php?select=horreur">Horreur</a><br/> </ul> </div> <div class="sous_menu"> <span class="menu">Jeux PC </span><br/> <ul> <a href="acceuil.php?categ=rpg">RPG</a><br/> <a href="acceuil.php?categ=strategie">Strategie</a><br/> <a href="acceuil.php?categ=aventure">Aventure</a><br/> </ul> </div> </div>
donc si je ne me trompe

Code:

#menu:hover ul

voudrai dire quand on survole l'intégralité on affiche tout les ul

et se que j'essaye de faire est derouler une section quand on survole son titre tel que "dvd" par exemple.
d'ou mon

Code:

.menu:hover ul

qui correspond pour moi si je ne me trompe pas a

Code:

<span class="menu">Jeux PC </span><br/>

et que j'interprète si je survol le <span class = menu>, alors j'affiche les <ul> qui sont dedans.

Bon il est possible que mon menu soit mal pensé pour que cela fonctionne
peut être dois rajouter des <ul> ou des <li>.

Merci d'avance

01/04/2010, 09h41
SpaceFrog

le hover n'est valable que pour les balises a pour certains navigateurs ...
01/04/2010, 10h35
darkterreur

kk si je comprend bien en fonction du navigateur la syntaxe du "hover" ne sera pas interprété de la même manière ?!
01/04/2010, 10h42
SpaceFrog

sur certaine sversions de IE me semble-t-il on ne peut invoquer le hover QUE sur les balises a
01/04/2010, 14h06
Bovino

Citation:

Envoyé par SpaceFrog

sur certaine sversions de IE me semble-t-il on ne peut invoquer le hover QUE sur les balises a

Oui, pour IE6 et inférieures, le hover n'est pris en compte que pour les balises a qui contiennent un lien. ;)
02/04/2010, 10h56
darkterreur

Bonjour,
je retourne le problème dans tout les sens

et le seul résultat que j'obtient est pas de déroulement, ou le déroulement intégrale de tout les champs.

quelqu'un a une idée?

Code:

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
<html><head><style type="text/css"> 
ul /* on masque  */
{
        display: none;
}
 
.sous_menu:hover ul/*on affiche le contenu du menu quand on le survol*/ 
{
        display: block;
}
</style>
</head>
<body>
<div id="menu">
 
	<div class="sous_menu">
		<span class="menu">Viniles </span><br/>
		<ul class="test">
			<a href="acceuil.php?choix=metal">Métal</a><br/>
			<a href="acceuil.php?choix=rock">Rock</a><br/>
			<a href="acceuil.php?choix=rockabilly">Rockabilly</a><br/>
			<a href="acceuil.php?choix=rock_roll">Rock'n Roll</a><br/>
			<a href="acceuil.php?choix=variete_francaise">Variété Francaise</a><br/>
		</ul>
	</div>
 
	<div class="sous_menu">
		<span class="menu">DVD </span><br/>
		<ul>
			<a href="acceuil.php?select=action">Action</a><br/>
			<a href="acceuil.php?select=fantastique">Fantastique</a><br/>
			<a href="acceuil.php?select=horreur">Horreur</a><br/>
		</ul>
	</div>
 
	<div class="sous_menu">
		<span class="menu">Jeux PC </span><br/>
		<ul>
			<a href="acceuil.php?categ=rpg">RPG</a><br/>
			<a href="acceuil.php?categ=strategie">Strategie</a><br/>
			<a href="acceuil.php?categ=aventure">Aventure</a><br/>
		</ul>
	</div>
 
</div>
</body>
</html>

Je ne sais pas si c'est ce que tu veux, mais c'est une solution

02/04/2010, 17h01
E.Bzz
Bonjour,
<ul> n'est pas un conteneur classique : il est destiné à contenir des <li>
Code:

1 2 3 4 <ul> <li><a ...>...</a></li> ... </ul>
Sinon, utilise des <div> ...

A+