Discussion :

[Shivas]

Bonjour,
*
J'essaie de mettre en place un menu deroulant horizontal j'ai un soucis au niveau de mon sous menu je l'ai masque avec l'attribut display mais comment dois-je procéder pour que l'orsque l'utilisateur survol le menu le sous-menu se deroule. Merci pour votre aide
*
Code 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
90
91
92
93
94
95
 
*
#nav .sousMenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
display:none;
}
*
*
*
#nav li
{
float: left;
width: 150px;
margin: 0;
padding: 0;
border: 0;
}
*
#nav li a:link, #nav li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #606766;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#nav li a:hover { background-color: #F2462E; }
#nav li a:active { background-color: #5F879D; }
*
#nav .sousMenu li a:link,
#nav .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
*
}
#nav .sousMenu li a:hover
{
background-image: none;
background-color: #96CA2D;
}
*
*
#nav .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
*
*
#nav
{
*
width: 944px;
list-style-type: none;
margin: 10px;
padding: 0px;
border: 0;
position: absolute;
top: 0;
left: 160px;
}
*
*******************************
#nav li a {
******* background-color : #606766; /*couleur cadre haut#009900*/
******* color: #FFFFFF ; /*Couleur texte menu*/
******* border: 0px solid #FFFFFF ;
******* font: 1em "Trebuchet MS",Arial,sans-serif ;
******* line-height: 2em ;
******* padding: 4px 20px ;
******* text-align: center ;
******* text-decoration: none ;
*************** }
*******************************
#nav li a:hover, #nav li a:focus, #nav li a:active {
******* background: #96CA2D no-repeat 0;
******* text-decoration: underline ;
******************************* }
*

*
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
 
*
<ul id = "nav">
*********************** <li><a href="<?php echo ROOTPATH; ?>/index.php" title="Retour à la page d'accueil">Accueil</a></li>
***********************
*********************** <li><a href="advance_search.php" title="aller à la section 1">Recherche avancee</a></li>
*
*********************** <li><a href="<?php echo ROOTPATH; ?>/recettes/form-ajout.php" title="aller à la section 1">Ajouter votre recette</a></li>
*
*********************** <li><a href="">Dossier</a>
******************************* <ul class="sousMenu">
*************************************** <li><a href="">Thèmes</a></li>
*************************************** <li><a href="">Astuces</a></li>
******************************* </ul>
*********************** </li>
***********************
*
*********************** <li><a href="<?php echo ROOTPATH; ?>/membres/connexion.php"> Espace perso</a></li>
</ul>

[stefany_]

Bonjour!
si j'ai bien saisi ton souci... il te faudrais simplement faire un :

Code :

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

#nav li:hover ul.sousMenu {display:block;}

Comme ca lorsque tu survole les LI de la navigation principale... son sous-menu devrais apparaitre.

j'espère que ça t'aideras !

Stefany