Bonjour tout le monde 
Me voilà avec un petit problème qui ne m'était jamais arrivé auparavant. J'ai pris un menu déroulant en CSS et l'ai adapté à mes besoins. Seulement, l'affichage est top sur Internet Explorer mais sur Mozilla, dès que le menu se déroule, la div du contenu se déplace sur la droite.
Pour mieux comprendre :
Est-ce que quelqu'un aurait la bonté de me dire ce que je fais de faux ?
Me voilà avec un petit problème qui ne m'était jamais arrivé auparavant. J'ai pris un menu déroulant en CSS et l'ai adapté à mes besoins. Seulement, l'affichage est top sur Internet Explorer mais sur Mozilla, dès que le menu se déroule, la div du contenu se déplace sur la droite.
Pour mieux comprendre :
<!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=iso-8859-2" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin: 0px;
background-color: #F1F7FE;
text-align: center;
font-family: Arial;
font-size: 12px;
color: #000000;
text-align:center;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FF9900;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: none;
}
#global {
width: 790px;
margin-left:auto;
margin-right:auto;
text-align: center;
background-color: #FFFFFF;
border-left: solid 1px #D3DEE8;
border-right: solid 1px #D3DEE8;
}
#navig {
width: 100%;
height: 22px;
border-bottom: solid 1px #D3DEE8;
text-align:right;
font-size: 10px;
padding-top: 5px;
}
#header {
width: 100%;
height: 220px;
}
#menuDeroulant {
background-image:url(fond_menu.png);
background-repeat:repeat;
width: 790px;
height: 42px;
border: 0;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
text-align:center;
}
#menuDeroulant li {
width: 158px;
border: 0;
float: left;
margin: 0;
padding: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited {
color: #FFF;
height: 1%;
border: solid 1px #25557D;
display: block;
margin: 0;
padding: 13px 10px;
text-decoration: none;
}
#menuDeroulant li a:hover {
}
#menuDeroulant li a:active {
}
#menuDeroulant .sousMenu {
border: 0;
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
#menuDeroulant .sousMenu li {
width: 158px;
border: 0;
/*border-top: 1px solid transparent;*/
margin: 0;
float: none;
padding: 0;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited {
color: #FFF;
background: transparent url("fondTR.png") repeat;
border: 0;
display: block;
margin: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover {
background-image: none;
background-color: #1283D7;
}
#menuDeroulant li:hover > .sousMenu {
display: block;
}
#contenu {
text-align: left;
padding: 15px;
}
-->
</style>
</head>
<body>
<div id="global">
<div id="navig"><a href="#">FR</a> | <a href="#">DE</a> | <a href="#">EN</a></div>
<div id="header">aaaaaaa</div>
<div>
<ul id="menuDeroulant">
<li> <a href="#">SOCIETE</a>
<ul class="sousMenu">
<li><a href="#">HISTORIQUE</a></li>
<li><a href="#">NOTRE VISION</a></li>
<li><a href="#">etc.</a></li>
</ul>
</li>
<li> <a href="#">PLACEMENT</a>
<ul class="sousMenu">
<li><a href="#">OFFRES D'EMPLOI</a></li>
<li><a href="#">VOS CVs</a></li>
<li><a href="#">etc.</a></li>
</ul>
</li>
<li> <a href="#">DELEGATION</a>
<ul class="sousMenu">
<li><a href="#">PERSONNEL TEMPORAIRE</a></li>
<li><a href="#">MAINTENANCE INFORMATIQUE</a></li>
<li><a href="#">etc.</a></li>
</ul>
</li>
<li> <a href="#">FORMATION</a>
<ul class="sousMenu">
<li><a href="#">SOCIETES</a></li>
<li><a href="#">JE SAIS PAS</a></li>
<li><a href="#">etc.</a></li>
</ul>
</li>
<li> <a href="#">CONTACTS</a>
<ul class="sousMenu">
<li><a href="#">NOUS ECRIRE</a></li>
<li><a href="#">PLAN D'ACCES</a></li>
<li><a href="#">etc.</a></li>
</ul>
</li>
</ul>
</div>
<div id="contenu">
<p>Mon contenu</p>
<p>... etc.</p>
</div>
</div>
</body>
</html>Est-ce que quelqu'un aurait la bonté de me dire ce que je fais de faux ?
)