[CSS 3] Problème avec le sélecteur > [Résolu]

ernestrenan · 28/07/2011, 20h02

Bonjour

Dans mon menu ce sont les sous menus cliquables. Tout marchait très bien puis après une toute légère modification du code html plus rien ne marche. Plus rien ne marche ni sous firefox ni sous safari j'ai l'impression que les navigateurs ne reconnaissent plus le > du code css. J'y perd mon latin et mes cheveux !
Voilà le code :

Code html :

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
<!DOCTYPE html>
<html>
    <head>
       <title>Dauphine on air : stay tuned !</title>
       <meta http-equiv="Content-Language" content="fr" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <meta name="description" content="Dauphine on air radio de l'université paris Dauphine" />
       <meta name="keywords" content="DoA dauphine on air radio paris etudiant" />
       <link rel="stylesheet" href="designCSS3.css" />
   </head>
 
    <!--haut de page-->
    <header>
        <!--logo-->
        <a href="/" id="logo">Logo de D.O.A.</a>
 
        <!--menu-->
        <nav id="menu">
            <!--liste des images du menu-->
            <ul>
                <li>
                    <!--sous liste des liens-->
                    <ul>
                        <a href="/"><li>Emissions</li></a>
                        <li><a href="/">Interviews</a></li>
                        <li><a href="/">Podcasts</a></li>
                    </ul>
                    <img src="images/sons.jpg" alt="du son et des emissions" />
                </li>
                <li>
                    <img src="images/doa.jpg" alt="DOA" />
                    <!--sous liste des descriptions-->
                    <ul>
                        <li><a href="/">Bureau</a></li>
                        <li><a href="/">Membres</a></li>
                        <li><a href="/">Contacts</a></li>
                    </ul>
                </li>
                <li>
                    <img src="images/bonus.jpg" alt="cadeaux bonux" />
                    <!--sous liste des descriptions-->
                    <ul>
                        <li><a href="/">Petites annonces</a></li>
                        <li><a href="/">Concours</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
 
 
    </header>
</html>

Code css :

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
a{
    text-decoration: none;
    target-new: tab;
}
 
ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
 
 
header{
    height: 60px;
    margin: 0 auto;
    position: relative;
    width: 960px;
    z-index: 100;
}
 
/* design du menu*/
 
nav li{
    display: inline-block;
    padding-right: 10px;
 
}
 
#menu a{
    color: #FF5900;
    display: inline-block;
}
 
#menu a:hover{
    color: white;
    border-bottom: 3px white groove;
}
 
#menu>li{
    position: relative;
    vertical-align: top;
    background-color: rgba(20, 20, 255,0.8);
    color: #fff;
    height: 100px;
    width: 250px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
nav li ul{
    font-size: 0.85em;
    margin: 8px;
    line-height: 1.4;
}
 
img{
    /*position: absolute*/;
    left: 0;
    top: 0;
    border: none;
    /* webkit */
 
    -webkit-transition-property: position, top;
    -webkit-transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
 
    /*FF */
 
    -moz-transition-property: position, top;
    -moz-transition-duration: .5s;
    -moz-transition-timing-function: ease-out;
 
    /*standard */
 
    transition-property: position, top;
    transition-duration: .5s;
    transition-timing-function: ease-out;
}
 
#menu>li:hover img{
    position: absolute;
    top: 60px;
}

Merci

Bisûnûrs · 29/07/2011, 08h04

J'imagine que tu as passé ton id "menu" de l'ul vers le nav. Le sélecteur > signifie "directement descendant". Dans ton cas, aucun li n'est directement descendant de nav. Ils le sont de ul.

ernestrenan · 29/07/2011, 16h13

oh god ! je pensais que > signifiait "le premier niveau trouvé et celui là seulement". Merci beaucoup

29/07/2011, 08h04	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	J'imagine que tu as passé ton id "menu" de l'ul vers le nav. Le sélecteur > signifie "directement descendant". Dans ton cas, aucun li n'est directement descendant de nav. Ils le sont de ul.
	00

29/07/2011, 16h13	#3
ernestrenan Membre du Club Étudiant Inscription : mars 2011 Messages : 136 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2011 Messages : 136 Points : 51 Points : 51	oh god ! je pensais que > signifiait "le premier niveau trouvé et celui là seulement". Merci beaucoup
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email