Menu déroulant et survol

**arnaudbesse** · 23/07/2014, 07h06

Bonjour, besoin d'aide urgent. Je voudrai créer une page web avec un menu déroulant (j'ai deja le code html et le css). Le problème c'est qu'au survol, apres etre passé sur le menu deroulant l'écriture du menu (pas du sous menu) reste jaune au lieu de revenir a l'état initial (par contre quand je sors avec ma souris par le haut la couleur de l'écriture revient à l'état initial)...comment pouvez vous m'aider...j'espere que j'ai été clair. Je vous attends, Merci.

j'ai envoyé les codes en pièces jointes.

[edit]
Fichier HTML : index.html
Fichier CSS : style.css
[/edit]

**NoSmoking** · 23/07/2014, 18h32

Bonjour,
<HUMEUR data-role="TAQUINE">

...(j'ai deja le code html...

c'est bien mais pas nous, mais ce n'est pas grave et pas urgent...

Je vous attends, Merci.

je n'ai pas l'adresse non plus...
</HUMEUR>

**s0h3ck** · 23/07/2014, 21h33

Votre message est assez ambigu si vous me permettez. (On va dire que c'est la faute de GT (Google traduction)

.) Tout d'abord, on a un code source index.html et une feuille css style.css. Ce qui semble cohérent. Toutefois, si on regarde attentivement, il nous manque beaucoup de détails. Par exemple :

Code :

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

1
2
3
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

Comme j’ai dit… ce ne sont que des détails. J’ai donc réduit le code pour me simplifier la tâche (et ce que vous auriez dû faire et ce que vous devriez toujours faire lorsque vous venez posez une question dans un forum.)
Voici le code de balisage hypertexte index.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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Communaute pour la Fraternite Universelle</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body id="page1">
        <header>
            <nav>
                <ul class="menu">
                    <li><a href="index.html">ACCUEIL</a></li>
                    <li><a href="#">DEVELOPPEMENT DURABLE</a>
                        <ul>
                             <li><a href="formation1.html">Formation</a></li>
                             <li><a href="lutte contre la pauvrete.html">Lutte contre la pauvrete</a></li>
                             <li><a href="dialogue interculturel.html">Dialogue Interculturel</a></li>
                        </ul>
                    </li>
                    <li><a href="#">SPIRITUALITE</a>
                        <ul>
                             <li><a href="formation2.html">Formation</a></li>
                             <li><a href="nos evements.html">Nos Evements</a></li>
                        </ul>
                    </li>
                    <li><a href="actualites.html">ACTUALITES</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

Et la feuille de style en cascade style.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
96
97
.menu, .menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
.menu {
    margin:200px 0 0 0;
    list-style:none;
 
}
.menu:before, .menu:after {
        content: "";
        display: table;
}
.menu:after {
        clear: both;
}
.menu {
        zoom:1;
}
.menu li {
    float:left;
    position:relative;
}
.menu a {
    float:left;
    font-size:18px;
    letter-spacing:-1px;
    padding:12px 20px;
    color:#009;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -o-border-radius:6px;
}
.menu li:hover > a{
    background:#600;
    color:#ff0;
}
*html #menu li a:hover { /* IE6 only */
     color: #ff0;
}
 
/***** Sous-menu *****/
.menu ul{
    margin: 20px 0 0 0;
    _margin: 0;/*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 48px;
    left: 0;
    z-index:9999;
    background:#3F3;
    -webkit-background:#3f3;
    -moz-border-radius:0 0 6px 6px;
    -webkit-border-radius:0 0 6px 6px;
    -ms-border-radius:0 0 6px 6px;
    -o-border-radius:0 0 6px 6px;
    border-radius:0 0 6px 6px;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
.menu li:hover > ul{
    opacity: 1;
    visibility: visible;/*rend visible le sous menu au survol*/
    margin: 0;
}
.menu ul li {
    float:none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
}
.menu ul a{
    /*grandeur de chaque case de a dans ul*/
    /*largeur de chaque case de a dans ul*/
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;/*a fait apparaitre les barres*/
    text-transform: none;
    }
.menu ul a:hover{
    border-radius:0;
    background-color:#003;
    }
.menu ul li:first-child > a {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

Comme je n'avais que la feuille de style en cascade style.css, j'ai tester et l'écriture du menu reste jaune en effet. La solution à votre problème est très simple. C'est un oublie d'un sélecteur css par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
.menu li:hover > a{
    background:#600;
    color:#fff; /* La touche en blanc, car bleue n'est pas très visible si vous voulez mon avis. */
} 
 
.menu li a:hover {
    background:#600;
    color: #ffff00;
}

**NoSmoking** · 23/07/2014, 21h56

Je n'avais pas vu le 1er fichier
</HUMEUR>

**arnaudbesse** · 25/07/2014, 20h18

Merci a s0h3ck de m'avoir répondu aussi vite.
Alors j'ai essayé ce que tu as dit mais sa ne marche pas comme je veux.
Tu vois par exemple avant de survoler le menu accueil, accueil est écrit en bleu quand je le survol sa devient jaune avec un background quand je quitte le survol l'écriture redevient bleu c'est ce que je veux faire sur developpement durable qui quand je quitte le survol reste jaune

**arnaudbesse** · 25/07/2014, 22h45

voici les autres fichiers css

**s0h3ck** · 28/07/2014, 00h29

Bonjour,

Je ne suis pas certain de comprendre ce que vous voulez vraiment. Je vous ai fait des « impr. écran » et vous allez me dire la version qui correspond à ce que vous voulez :

Version 1 :

Nom : v1.png
Affichages : 238
Taille : 7,1 Ko

Version 2 :

Nom : v2.png
Affichages : 210
Taille : 6,9 Ko

Version 3 :

Nom : v3.png
Affichages : 216
Taille : 6,3 Ko

Si je n'ai pas cibler ce que vous souhaitez, il va falloir être un peu plus précis ou demander à quelqu'un de formuler adéquatement votre interrogation. Prendre note également que dans les trois versions précédentes, la solution se trouve en jouant avec ce morceau de code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.menu li:hover > a{
    background:#600;
    color:#fff;
}
 
.menu li a:hover {
    background:#600;
    color: #ffff00;
}

Pour la première version, c'est le code précédent.
Pour la deuxième version, vous devez mettre enlever cette propriété du code précédent : color:#fff;
Pour la troisième version, vous gardez seulement :

Code :

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

1
2
3
4
.menu li a:hover {
    background:#600;
    color: #ffff00;
}

ce qui signifie que vous enlevez le sélecteur qui précède.

J'espère que ça répond à vos interrogations.

Menu déroulant et survol

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager