Discussion :

[nokia1600]

Bonjour, j'ai effectué un menu déroulant en css.

Le problème c'est qu'il fonctionnait et bien sur les navigateurs mais j'ai voulu rajouter des sous-sous listes... Maintenant il fonctionne à peut près sous Mozilla et pas du tout sous Internet Explorer.

problème sous Mozilla Firefox : les sous listes devraient être en dessous des listes. les sous-sous listes devrait coller les sous listes à droite.

problème sous Internet Explorer : constatez par vous même http://www.reimsjudo.fr

J'ai un problème c'est que quoi que je change dans le css, le menu ne change plus... problème de balisage?

Voici tout d'abord 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
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
98
99
100
101
102
#menu, #menu ul 
/* Liste */     
{
    padding : 0; /* pas de marge intérieure */
    margin : auto; /* ni extérieure */
    list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 21px; /* on définit une hauteur pour chaque élément */
    text-align : center; /* on centre le texte qui se trouve dans la liste */
 
}
 
#menu /* Ensemble du menu */
{
    width : 1000px;
	margin-top : auto;
    margin-left : 1px;
	margin-bottom: auto;
	text-align: center;
    font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
}
 
#menu a /* Contenu des listes */
{
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */
    background : #CC0000; /* couleur de fond */        
    color : #fff; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 123.7px; /* largeur */
}
 
#menu li /* Elements des listes */      
{ 
    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 */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
    border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
 
#menu li ul /* Sous-listes */
{ 
    position: absolute; /* Position absolue */
    width: 123.7px; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
 
#menu li ul li /* Éléments de sous-listes */
{
    border-top : 1px solid #000; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
   border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
#menu li ul ul 
{
margin-left:1000px;
    margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
    border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
 
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
    border-left     : 1px solid transparent; /* on met une bordure transparente sur la gauche de chaque élément */
}
 
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
    color: #CC0000; 
    background: #fff; 
}
 
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste*/
{
    left: -999em; /*On expédie les sous-sous-listes hors du champ de vision*/
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* 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 */
{
    left: auto; /* Repositionnement normal */
    min-height: 0; /* Corrige un bug sous IE */
	display: inline;
}
 
#menu li li ul
{
	margin-left:123.7px;
	margin-top: -22px; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
	border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

Puis le 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
 
<div id="global">
 
 
<div id="en_tete">
<img SRC="images/banyy.png" alt="banniere">
 
<ul id="menu">
    <li><a href="index.html">Accueil</a></li>
    <li><a>Présentation</a>	
        <ul>
            <li><a href="Etatcivil.html">Etat civil</a></li>
            <li><a href="Objectif.html">Objectifs</a></li>
            <li><a>Localisation</a></li>
			<!--<ul>
                    <li><a href="ReneTys.html">Rene Tys</a></li>
                    <li><a href="StExupery">St Exupéry</a></li>
                    <li><a href="Champigny.html">Champigny</a></li>
                    <li><a href="Bezannes.html">Bezannes</a></li>-->
 
			<!--</ul>-->
		</ul>      
     </li>
    <li><a href="EquipeEducative.html" >L'Equipe Educative</a></li>
	<li><a>Les Sections</a>
		<ul>
            <li><a href="ReneTys.html">Rene Tys</a></li>
            <li><a href="StExupery.html">St Exupéry</a></li>
            <li><a href="Champigny.html">Champigny</li>
			<li><a href="Bezannes.html">Bezannes</a></li>
		</ul>
	</li>
			<li><a href="Calendrier.html">Calendriers</a></li>
 
			<li><a href="Resultats.html" >Resultats</a></li>
 
			<li><a>Stages</a>
				<ul>
            <li><a href="Arbitrage.html">Arbitrages</a></li>
            <li><a href="Enseignants.html">Enseignants</a></li>
            <li><a href="Competiteurs.html">Compétiteurs</a></li>
				</ul>
			<li><a>Photos</a>
			<ul>
            <li><a href="Photos.html">Photos</a></li>
            <li><a href="Articles_de_presse.html">Articles de Presse</a></li>
			</ul>
	</li>
</ul>
</div>
</div>

Par avance merci pour l'aide

[supersnail]

Bizarre...

Chez moi, ça a l'air de fonctionner sous IE6 (ou alors est-ce dû à l'émulation par wine? ).

Cependant les sous-sous menus sont assez difficiles à attraper (surtout quand on ne voit pas la souris à cause d'un bug de wine :p )

[nokia1600]

Ne pourrais tu pas tester avec IE8?

[Macmillenium]

Ici

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
            <li><a>Localisation</a>
			<ul>
                    <li><a href="ReneTys.html">Rene Tys</a></li>
                    <li><a href="StExupery">St Exupéry</a></li>
                    <li><a href="Champigny.html">Champigny</a></li>
 
                    <li><a href="Bezannes.html">Bezannes</a></li>
                    </li>
			</ul>

Le conteur LI est fermé avant l'UL.

Et ici

Code html :

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

1
2
3
4
5
6
7
8
 
			<li><a>Stages</a>
				<ul>
            <li><a href="Arbitrage.html">Arbitrages</a></li>
            <li><a href="Enseignants.html">Enseignants</a></li>
            <li><a href="Competiteurs.html">Compétiteurs</a></li>
 
				</ul>

Il manque la fermeture du LI.

Corrige ton code

[nokia1600]

Merci beaucoup =) Problème résolu