Menu déroulant en css

**Lorenzaccio** · 21/05/2010, 10h47

Bonjour,
j'essaie de réaliser un menu déroulant horizontal, avec le sous-menu qui s'affiche suivant la rubrique du menu pointée par la souris.

Voici une partie du 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Titre du site</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />
 
		<script type="text/javascript">
                <!--
                function toggle2000s(){
                        alert('');
                }
 
                sfHover = function() {
                        var sfEls = document.getElementById("decade").getElementsByTagName("LI");
                        for(var i=0; i<sfEls.length; i++) {
                                sfEls[i].onmouseover=function() {
                                        this.className+=" sfhover";
                                }
                                sfEls[i].onmouseout=function() {
                                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                                }
                        }
                }
                if(window.attachEvent) window.attachEvent("onload", sfHover);
                -->
        </script>
 
	</head>
	<body>
 
		<div id="header">
			<p>
				<img src="header2.png" alt="header"/>
			</p>
		</div>
 
		<ul id="decade">
			<li>
				<img src="1910s.png" alt="1910s" style="cursor:pointer;" onclick="toggle2000s()"/>
				<ul>
					<li><img src="2000.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2001.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2002.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2003.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2004.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2005.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2006.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2007.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2008.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2009.png" alt="2000" style="cursor:pointer;"/></li>
				</ul>
			</li>
 
			<li>
				<img src="1920s.png" alt="1920s" style="cursor:pointer;" onclick="toggle2000s()"/>
				<ul>
					<li><img src="2000.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2001.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2002.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2003.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2004.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2005.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2006.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2007.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2008.png" alt="2000" style="cursor:pointer;"/></li>
					<li><img src="2009.png" alt="2000" style="cursor:pointer;"/></li>
				</ul>
			</li>
 
		</ul>
	</body>
</html>

Et le 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
body {
margin-left: auto;
margin-right: auto;
width: 100%;
}
 
#header {
margin-left: auto;
margin-right: auto;
width:90%;
}
 
#decade {
padding: 0;
margin-left: 10%;
list-style : none;
text-align : center;
}
 
#decade img {
padding : 0;
}
 
/* Éléments des listes */
#decade li { 
float: left; 
/* pour IE qui ne reconnaît pas "transparent" */
border-right: 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
list-style-type: none;
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #decade li {
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
/* Sous-listes */
#decade li ul { 
position: absolute;
display: none;
}
 
/* Eléments de sous-listes */
#decade li ul li {
/* pour IE qui ne reconnaît pas "transparent" */
border-top: 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #decade li ul li {
border-top: 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #decade li ul ul {
border-left: 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
 
/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
#decade li:hover ul, #decade li li:hover ul, #decade li.sfhover ul, #decade li li.sfhover ul {
display: block;
min-height: 0; /* Corrige un bug sous IE */
}

Donc j'aimerais savoir pourquoi mes images ne se mettent pas les unes en dessous des autres... avec des liens à la place des images, ça marche, ils sont bien les uns en dessous des autres.

Merci !

**RunCodePhp** · 21/05/2010, 11h37

Salut

Les LI sont par défaut des éléments de type "en ligne".
Il faudrait quelque chose qui provoquera un retour à la ligne.

2 solutions, à essayer : (pour les LI je pense)
- Soit rajouter un -> float: none
- Soit rajouter un -> display: block

Peut être sur cette élément : #decade li ul li
Mais pas sûr.
Ou alors, à la sous-liste qui apparemment serait li.sfhover

Par contre, il manquerait justement de définir la nom de la classe pour les sous-liste, non ?

Code :

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

1
2
3
4
5
6
7
8
9
 
<ul id="decade">
    <li>
        <ul class="sous_liste">
            <li style="display: block;">Passera à la ligne théoriquement</li>
            <li style="display: block;">Passera à la ligne théoriquement</li>
        </ul>
    </li>
</ul>

Fait des essais dans ce sens en tout cas

**Lorenzaccio** · 21/05/2010, 12h33

Merci !
Le fait de rajouter float: none a marché

.

Menu déroulant en css

HTML

Discussions similaires

Partager

Partager