Bonjour,

J'ai besoin d'aide.....
JE viens d'insérer dans  mon header les codes CSS d'un menu mais je souhaite savoir comment faire pour le rendre compatible avec safari, mozilla, internet explorer, opera, netscape....
Voici le code dans mon header:

<style type="text/css">
<!--
body {
background: white;
padding:0;
margin:1;
font-family: verdana, arial, sans-serif;
font-size: 80%;
color: white;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
   position: absolute;
   top: 1em;
   left: 1em;
   width: 10em;
   visibility: visible;
   z-index: 1;
}

#menu dt {
cursor: pointer;
background: #DBAB05;
height:20px;
width: 12em;
line-height: 20px;
margin: 2px 0;
border: 1px solid white;
text-align: left;
}

#menu dd {
   position: absolute;
   z-index: 100;
   left: 8em;
   margin-top: -1.4em;
   width: 11em;
   background: #fcfcfc;
   border: 1px solid #A17D06;
   visibility: visible;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: left;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu dt a {
color: #ffffff;
text-decoration: none;
display: block;
}
#menu li a {
color: #000;
text-decoration: none;
display: block;
}
#menu li a:hover {
text-decoration: underline;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
a:link {
   color: fcfcfc;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: fcfcfc;
}
a:hover {
   text-decoration: none;
}
a:active {
   text-decoration: none;
}

-->
</style>

et dans le body:

<dl id="menu">
      <dt onmouseover="javascript:montre('smenu1');"><a href="#">Accueil</a></dt>
   <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
            <ul>
               <li><a href="#">Savanna Tours & Safaris</a></li>
            </ul>
   </dd>   
         
      <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Afrique Australe</dt>
         <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
            <ul>
               <li><a href="#">Afrique du Sud</a></li>
               <li><a href="#">Botswana</a></li>
               <li><a href="#">Namibie</a></li>
               <li><a href="#">Zimbabwe</a></li>
            </ul>
         </dd>   

      <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Afrique Centrale</dt>
         <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
            <ul>
               <li><a href="#">Gabon</a></li>
               <li><a href="#">Kenya</a></li>
                  <li><a href="#">Tanzanie</a></li>
            </ul>
         </dd>

      <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Afrique de l'Ouest</dt>
         <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
            <ul>
               <li><a href="#">Bénin</a></li>
               <li><a href="#">Burkina Faso</a></li>
               <li><a href="#">Côte d'Ivoire</a></li>
               <li><a href="#">Guinée</a></li>
               <li><a href="#">Mali</a></li>
               <li><a href="#">Mauritanie</a></li>
               <li><a href="#">Niger</a></li>
               <li><a href="#">Sénégal</a></li>
            </ul>
         </dd>
</dl>
</div>

Quelq'un peut me donner un coup de pouce????? Je débute donc....
D'avance merci!

Web greetings,

Koss70

Merci de ta réponse.

1. Problème avec opéra version 6.03 ( celle que j'ai ), le menu s'affiche comme s'il y avait survol de souris, c'est à dire avec la dexième colonne flottante avec en plus 3 rows.

2. Idem avec internet explorer mais sans rows en +

3. idem pour safari

Web greetings,

Koss70