Décalage sous menu à droite IE

**doc51** · 31/10/2009, 12h55

Bonjours,

Je réalise un sous menu, le probléme c'est que sous IE le menu se décale à droite

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
        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 */
		background: url(../images/menu.jpg) no-repeat;
		height:37px;
		width:1024px;
		margin-top: 10px;
}
 
#menu a /* Contenu des listes */
{
    background: url(../images/separateur_menu.jpg) no-repeat;
	background-position : right;
	display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */       
    color : #383737; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 144px; /* largeur */
	padding-top : 8px;
	font-weight:bold;
	font-size:13px;
	height:26px;
}
 
#menu li ul li a /* Contenu des sous-listes */
{
 
	background: url(../images/separateur_sousmenu.jpg) no-repeat;
	background-position :  bottom center;
	display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */  	
    color : #383737; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 134px; /* largeur */ 
	font-weight : bold; 
	font-size:12px;
	height:34px;
}
 
#menu li /* Elements des listes */      
{ 
        float : left;	
		height:34px;
		width:144px;
		margin-top : 2px;
		overflow:hidden;
}
 
#menu .dernier
{
    background:none;    
}
#menu li.dernier
{
	float:right;   
	width:100px;
 
}
 
#menu li:hover, #menu li.sfhover
{
	background : url(../images/survol.jpg) no-repeat;
	width: 144px; 
}
 
#menu li:hover.dernier, #menu li.sfhover.dernier
{
	background : none ;
	width:100px;
}
 
#menu li.dernier a:hover
{
	color : #ca2f2d;
	text-decoration:underline;
}
 
#menu li ul /* Sous-listes */
{ 
    background: url(../images/fond_sousmenu.jpg) repeat-x;
	position: absolute; /* Position absolue */
    width: 142px; /* Largeur des sous-listes */
    /*left: -999em;*/ /* Hop, on envoie loin du champ de vision */
	border: 1px solid #b4b4b4;
}
 
 
#menu li ul li:hover, #menu li ul li.sfhover /* Lorsque la souris passe sur un des liens */    
{
    background : none ;
	background-color : #d97e7d;
	margin-left:0px;
	padding-left:0px;
	margin-top:0px;
	padding-top:2px;
	width: 143px !important;
	width: 144px;
}
 
#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 */
}

et voici mon code XHTML

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
 
<ul id = "menu">
				<li><a href ="" >Accueil</a></li>
 
				<li>
					<a href ="" >Site</a>
						<ul>
							<li><a href ="" >Gestion des menus</a></li>
							<li><a href ="" >Gestion des catégories</a></li>
							<li><a href ="" >Gestion des articles</a></li>
							<li><a href ="" class="dernier">Gestion des utilisateurs</a></li>
						</ul>
				</li>
				<li><a href ="" >Fonctionnalitès</a></li>
				<li class="dernier"><a href ="" >Déconnexion</a></li>
			</ul>

**sebhm** · 02/11/2009, 01h26

Bonjour,

j'ai le meme affichage sous FF3 et IE7, à savoir le menu 'Deconnexion' à droite, le sous-menu sous le menu 'site'.

Qu'est ce que tu veux exactement ?