display none et inline

Version imprimable

Bonjour tout le monde, après beaucoup d'essai et de combinaison, je n'arrive toujours pas à afficher un menu déroulant pour la navigation...
Voici mon code html simplifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 <nav> <h1>Index</h1> <ul> <li><a href=".....">item1</a></li> <li id="item2"><a href=".....">item2</a> <ul> <li><a href="......">sous-item 2</a></li> </ul> </li> </ul> </nav>
Mon but étant de cacher la liste à puce fille de item2 et de l'afficher au survol, quelle est la solution la plus simple et qui marche ?

05/03/2013, 20h20
rodolphebrd

Bonjour;

il faut que votre ul ul soit en display:none et que votre ul li:hover ul soit en display:block par exemple.

C'est un exemple parmi les innombrables tutos disponibles sur le web.
05/03/2013, 20h40
onda47
J'ai déjà essayé le code suivant :
Code:

1 2 3 4 5 6 7 8 9 nav ul ul { display: none; } nav ul li :hover ul { display: block; // ou inline }
mais ça ne marche pas. Je comprends vraiment pas...
05/03/2013, 21h02
Bovino

Code:

ul li:hover ul

Code:

nav ul li :hover ul

C'est pas pareil...
Chez Rodolphe, le :hover s'applique au li, chez toi, il s'applique à un enfant de li et aucune balise enfant des li concernés ne possèdent de balise ul...
05/03/2013, 21h26
onda47

Et bien ça ne marche pas non plus
d'ailleurs les listes sont dans nav donc ça devrait marcher quand même
05/03/2013, 21h31
Bovino

Je ne te parle pas du nav, mais du li:hover dans un cas et du li :hover dans l'autre, ce qui n'a absolument pas la même signification !
05/03/2013, 22h35
onda47

ah oui excuse-moi, j'ai mal lu ton post ça marche bien comme ça effectivement, je ne savais pas que l'espace avait une importance, merci :)

Voici un exemple , mais vous devriez apprendre les bases du css.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
ul{
        position:relative;
}
ul>li {
        display:inline;
}
ul ul {
        position: absolute;
        top: 1em;
        display:none;
}
ul li:hover ul{
        display:block;
}
 
</style>
</head>
<body>
 
<nav>
<h1>Index</h1>
<ul>
     <li><a href=".....">item1</a></li>
     <li id="item2"><a href=".....">item2</a>
          <ul>
               <li><a href="......">sous-item 2</a></li>
          </ul>
     </li>
</ul>
</nav>
</body>
</html>