28172 sujets

CSS et mise en forme, CSS3

Bonjour !
Je suis en train de retravailler le design de mon site et j'ai quelques soucis avec mon menu déroulant horizontal.
Tout d'abord, voici la page en question : http://www.annuaire-animaux.net/test/index.php
Impossible d'afficher correctement le menu sur IE 6.0, alors que c'est nickel sur les versions supérieures, sur Firefox également... (c'est le menu en-dessous de la bannière)
Je n'arrive pas à trouver le moyen d'y arriver !
Je vous donne les fichiers en cause :


Fichier entete.php :

<ul id="menu" class="menu1">
<li><a href="#">ACCUEIL</a>
<ul class="c1">
<li><a class="parent" href=" [ Lien ]" target="_blank" title="Annuaire Animaux et Nature">--&gt; Annuaire Animaux - Nature</a></li>
<li><a href=" [ Lien ]" title="Portail Animaux et Nature">--&gt; Portail Animaux - Nature</a></li>
<li><a href=" [ Lien ]" target="_blank" title="Top-site Animaux et Nature">--&gt; Top-sites animalier</a></li>
</ul>
</li>
<li><a class="parent" href="#">BOUTIQUES ANIMALIERES</a>
<ul class="c1">
<li><span class="title">TOUT POUR VOS ANIMAUX :</span></li>
<li><a href=" [ Lien ]" title="Animaleries, Boutiques Animaux en ligne">--&gt; Animaleries en ligne</a></li>
<li><a href=" [ Lien ]" title="Assurances sante Animaux">--&gt; Assurances sant&eacute;</a></li>
<li><a href=" [ Lien ]" title="Boutiques cadeaux Animaux">--&gt; Boutiques Cadeaux</a></li>
<li><span class="title">ET POUR LES MAITRES...</span></li>
<li><a href=" [ Lien ]" title="Livres sur les Animaux">--&gt; Librairie en ligne</a></li>
<li><a href=" [ Lien ]" title="Magazines sur les Animaux">--&gt; Magazines - Presse</a></li>
<li><a href=" [ Lien ]" title="Petites annonces Animaux">--&gt; Petites annonces</a></li>
<li><a href=" [ Lien ]" title="Boutiques cadeaux Animaux">--&gt; Boutiques Cadeaux</a></li>
</ul>
</li>
<li><a class="parent" href="#">IDEES CADEAUX &amp; DECO</a>
<ul class="c1">
<li><a href=" [ Lien ]" title="Mugs, tasses Animaux">--&gt; Mugs (tasses)</a></li>
<li><a href=" [ Lien ]" title="Posters Animaux et Paysages Nature">--&gt; Posters Animaux - Nature</a></li>
<li><a href=" [ Lien ]" title="Stickers muraux, deco Animaux">--&gt; Stickers muraux d&eacute;co</a></li>
<li><a href=" [ Lien ]" title="T-shirts Animaux">--&gt; T-shirts Animaux</a></li>
</ul>
</li>
<li><a class="parent" href="#">DIVERTISSEMENTS</a>
<ul class="c1">
<li><a href=" [ Lien ]" title="Cartes postales Animaux et Nature">--&gt; Cartes postales</a></li>
<li><a href=" [ Lien ]" title="Emoticons Animaux">--&gt; Emoticons Animaux</a></li>
<li><a href=" [ Lien ]" title="Fonds d'ecran Animaux et Paysages Nature">--&gt; Fonds d'&eacute;cran</a></li>
<li><a href=" [ Lien ]" title="Images gif Animaux, Photos animees">--&gt; Images gif anim&eacute;es</a></li>
<li><a href=" [ Lien ]" title="Logos, sonneries, accessoires pour votre portable">--&gt; Logos, Accessoires portable</a></li>
<li><span class="title">JEUX :</span></li>
<li><a href=" [ Lien ]" title="Jeux d'animaux virtuels">--&gt; Animaux virtuels</a></li>
<li><a href=" [ Lien ]" title="Jeux Puzzles sur les Animaux">--&gt; Puzzles Animaux</a></li>
<li><a href=" [ Lien ]" title="Jeux Puzzles de Paysages Nature">--&gt; Puzzles Nature</a></li>
<li><a href=" [ Lien ]" title="Jeux Quizz sur les Animaux">--&gt; Quizz sur les animaux</a></li>
<li><a href=" [ Lien ]" title="Autres jeux en flash Animaux">--&gt; Autres jeux en flash</a></li>
</ul>
</li>
<li><a class="parent" href="#">AUTRES BOUTIQUES</a>
<ul class="c1">
<li><a href=" [ Lien ]" title="Boutiques discount Fleurs et Jardin">--&gt; Jardinerie - Fleurs</a></li>
<li><a href=" [ Lien ]" title="Boutiques discount Maison et Bricolage">--&gt; Maison-Bricolage</a></li>
<li><a href=" [ Lien ]" title="Boutiques discount Produits bio et ecolo">--&gt; Produits bio - &eacute;cologiques</a></li>
<li><a href=" [ Lien ]" title="Boutiques discount Sport et Loisirs de plein-air">--&gt; Sport - Loisirs de plein air</a></li>
<li><a href=" [ Lien ]" title="Boutiques discount Voyages et vacances">--&gt; Voyages - vacances</a></li>
</ul>
</li>
<li><a class="parent" href="#">PARTENAIRES</a>
<ul class="c1">
<li><a href=" [ Lien ]" target="_blank" title="Boutiques Cat's Lovers">--&gt; Boutique des Amoureux des Chats</a></li>
<li><a href=" [ Lien ]" target="_blank" title="Boutique discount Voitures ecolos">--&gt; Boutique Voitures &eacute;cologiques</a></li>
<li><a href=" [ Lien ]" target="_blank" title="Bons de reductions pour vos achats en ligne">--&gt; Site de Bons de r&eacute;duction</a></li>
<li><a href=" [ Lien ]" target="_blank" title=" Boutique V?nus Lingerie sexy a petits prix">--&gt; Boutique de Lingerie</a></li>
<li><a href=" [ Lien ]" target="_blank" title="Partenaires du site">--&gt; Autres partenaires</a></li>
</ul>
</li>
<li><a class="parent" href="#">RECHERCHE</a>
<ul class="c1">
<li><a href=" [ Lien ]" title="Recherche Animaux et Nature">--&gt; Faire une recherche</a></li>
</ul>
</li>
</ul>



et le fichier CSS :

.menu1 .title{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}
.menu1 {position:relative;zoom:1;z-index:10;}
.menu1 a, .menu1 li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}
.menu1 div a, .menu1 ul a, .menu1 ul li {float:none;}
.menu1 div{visibility:hidden;position:absolute;}
.menu1 li {z-index:auto;}
.menu1 ul {left:-10000px;position:absolute;z-index:10;}
.menu1, .menu1 ul {list-style:none;padding:0px;margin:-1px;}
.menu1 li a {float:none}
.menu1 li:hover>ul {left:auto;}
#menu ul {top:100%;}
#menu ul li:hover>ul {top:0px;left:100%;}
ul#menu li {float : left;}
ul#menu a {float : left;}
 
 #menu 
 {
  padding:5px 0px 0px 0px;
  background:#FAE28A;
  border-width:1px;
  border-style:solid;
  border-color:#900000;
  position:absolute;
  width:1000px;
  height:23px;
 } 
 #menu a 
 { 
  padding:7px 20px 5px 10px;
  margin:-5px 0px 0px -1px;
  color:#900000;
  font-family:Arial;
  font-size:11px;
  font-weight:bold;
  text-decoration:none;
  border-left:1px solid #900000;
  border-right:1px solid #900000;
  height:17px;
 }
 #menu a:hover 
 { 
  color:#900000;
  background-color:#FAE28A;
  height:17px;
 } 
 #menu div, #menu ul 
 { 
  padding:8px 15px 8px;
  margin:0px 0px 0px -1px;
  background-color:#FAE28A;
  border-width:0px 1px 1px;
  border-style:solid;
  border-color:#900000;
 } 
 #menu div a, #menu ul a 
 { 
  padding:3px 10px 3px 5px;
  margin:0px;
  background-color:transparent;
  border-width:0px;
  border-style:none;
 }
 #menu div a:hover, #menu ul a:hover 
 { 
  background-color:#E9BE00;
  color:#900000;
 }
 #menu .title 
 { 
  padding:2px 0px 2px 5px;
  margin:10px -4px 5px;
  background-color:#FAE28A;
  text-decoration:normal;
  color:#000000;
  font-family:Arial;
  font-size:11px;
  font-weight:bold;
  border-top:0px solid #900000;
 }


Si quelqu'un peut m'aider à résoudre ce problème, ce serait génial.
Merci par avance !!
Modifié par sanghoria (02 Sep 2008 - 11:32)