J'avais déjà fait un post sur un problème de menu (marqué résolu), mais j'ai un autre problème d' "esthétisme" car le résultat sous firefox et IE est différent...

Voici mon code :

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
<!doctype html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 
body 
{font: 12px Garamond, sans-serif;
text-align : center;
}
 
#menu1
{position: absolute;
width:100%;
}
 
#menu1 > li
{position:relative;
display:inline-block;
vertical-align:top;
font: 12px Garamond;
font-weight: bold;
margin: 2px;
padding: 3px;
}
 
#menu1 li a
{width: auto;
color: #3E1F00;  
background-color: transparent;
padding: 2px;
border:1px solid #077D2A;
text-decoration: none;}
 
#menu1 li a:hover 
{background-color: #FFC299;
font-weight: bold;
border:1px solid;
color: #8B4513;}
 
#menu1 .menuderoulant
{position:absolute;
z-index: 2;
left:0;
width:150%;
display: none;
list-style-type: none;
margin: 0;   
padding: 0;}
 
#menu1 .menuderoulant li
{padding: 7px;
/* width: 105px; //*/
height: 4px;
font-weight: normal;}
 
#menu1 .menuderoulant li a
{display: block;
color: #8B4513;
margin: 0;
border: 0;
text-decoration: none;       
background-color: #FFC299;}
 
#menu1 .menuderoulant li a:hover
{color: white;  
font-weight: bold;
background-color: #FF7519;}
 
#menu1 .menuderoulant li a:visited 
{background-color: white;}
 
#menu1 li:hover > .menuderoulant 
{display: block;}
 
</style></head>
 
<body>
 
<ul id="menu1">
<li><a href="#prehist">Préhistoire</a>
<ul class="menuderoulant">	
</ul></li>
 
<li><a href="#egypt">Antiquité Égyptienne</a>
<ul class="menuderoulant">	
<li><a href="#ancegypt">Ancien Empire Égyptien</a></li>
<li><a href="#moyegypt">Moyen Empire Égyptien</a></li>
<li><a href="#nouvelegypt">Nouvel Empire Égyptien</a></li>
</ul></li>	
 
<li><a href="#grecque">Antiquité Grecque</a>
<ul class="menuderoulant">
<li><a href="#cycla">Cycladique</a></li>
<li><a href="#minoe">Minoenne</a></li>
<li><a href="#mycen">Mycénienne</a></li>
<li><a href="#geome">Géométrique</a></li>
<li><a href="#orien">Orientalisante</a></li>
<li><a href="#archa">Archaïque</a></li>
<li><a href="#classi">Classique</a></li>
<li><a href="#helle">Hellénistique</a></li>
</ul></li>		      
 
<li><a href="#grecque">Antiquité Grecque</a>
<ul class="menuderoulant">	
</ul></li>			      
 
<li><a href="#grecque">Antiquité Grecque</a>
<ul class="menuderoulant">	
</ul></li>			      
 
<li><a href="#grecque">Antiquité Grecque</a>
<ul class="menuderoulant">	
</ul></li>			      
 
<li><a href="#grecque">Antiquité Grecque</a>
<ul class="menuderoulant">	
</ul></li>
 
 
</body></html>
et les résultats :

Nom : sousfirefox.JPG Affichages : 50 Taille : 85,3 KoNom : sousIE.JPG Affichages : 57 Taille : 80,3 Ko

Le plus gros problème étant le changement de couleur du sous menu visité qui demeure après le clic (sous IE et pas avec Firefox)

Merci pour vos bons conseils
PATPIERRE