Firefox Problème

Question

j'ai un problème avec Firefox, j'ai un menu déroulant en haut de mon site c'est le code pour le CSS

#zone-bar { 
background:#E5E5E5; 
min-height:30px; 
z-index:10; 
padding:5px 10px 0; 
} 
#zone-bar ul li { 
float:left; 
height:18px; 
margin-right:10px; 
position:relative; 
z-index:10; 
padding:5px 5px 0; 
} 
#zone-bar ul li:hover { 
background:#C0C0C0; 
} 
#zone-bar ul li a { 
color:#383838; 
display:block; 
float:left; 
font-size:1.1em; 
font-weight:700; 
height:23px; 
padding-right:3px; 
position:relative; 
right:-5px; 
text-decoration:none; 
top:-5px; 
} 
#zone-bar ul li a:hover,#zone-bar ul li a.zoneCur { 
background:url(images/right-hover.png) center right no-repeat; 
z-index:10; 
} 
#zone-bar ul li a span { 
position:relative; 
top:6px; 
} 
#zone-bar ul li ul { 
background:#FFF; 
border:1px solid #ccc; 
display:none; 
left:0; 
position:absolute; 
top:29px; 
width:150px; 
padding:10px 0 0; 
} 
#zone-bar ul li ul li { 
float:none; 
height:100%; 
margin:0; 
padding:0; 
} 
#zone-bar ul li ul li:hover { 
background:none; 
} 
#zone-bar ul li ul li a { 
display:block; 
float:none; 
margin-left:-5px; 
width:140px; 
padding:5px 0 0 10px; 
} 
#zone-bar ul li ul li a:hover { 
background:#C0C0C0; 
} 
#zone-bar ul { 
display:block; 
} 

Ceci est mon code HTML

<div id="zone-bar"> 
    <ul><li> 
    <a href="#"><span>My Account &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
      <li><a href="#">My Account</a></li> 
      <li><a href="#">My Channel</a></li> 
      <li><a href="#">My Videos</a></li> 
      <li><a href="#">Favorites</a></li> 
      <li><a href="#">Playlists</a></li> 
      <li><a href="#">Friend Requests (1)</a></li> 
      <li><a href="#">Logout</a></li> 
    </ul></li> 
    <li> 
    <a href="#"><span>Messages &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
      <li><a href="#">Messages (1)</a></li> 
      <li><a href="#">Compose New Message</a></li> 
      <li><a href="#">Notifications (0)</a></li> 
    </ul></li>    
    <li> 
    <a href="#"><span>Videos &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
        <li><a href="#">Recent</a></li> 
        <li><a href="#">Viewed</a></li> 
        <li><a href="#">Featured</a></li> 
        <li><a href="#">Top Rated</a></li> 
        <li><a href="#">Commented</a></li> 
    </ul></li> 
    <li> 
    <a href="#"><span>Channels &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
        <li><a href="#">Recent</a></li> 
        <li ><a href="#">Viewed</a></li> 
        <li ><a href="#">Featured</a></li> 
        <li ><a href="#">Top Rated</a></li> 
        <li ><a href="#">Commented</a></li> 
    </ul></li> 
    <li> 
    <a href="#"><span>Groups &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
      <li><a href="#">Create New Group</a></li> 
         <li><a href="#">All Time</a></li>  
         <li><a href="#">Today</a></li>  
         <li><a href="#">Yesterday</a></li>  
         <li><a href="#">This Week</a></li>  
         <li><a href="#">Last Week</a></li>  
         <li><a href="#">This Month</a></li>  
         <li><a href="#">Last Month</a></li>  
         <li><a href="#">This Year</a></li>  
         <li><a href="#">Last Year</a></li>     
    </ul></li> 
    <li> 
    <a href="#"><span>Upload &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
       <ul> 
         <li><a href="#">Upload New Video</a></li> 
         <li><a href="#">My Videos</a></li> 
    </ul></ul> 
    </div> 

vous

peut voir une démonstration en direct à doctorwhohd.com

Le problème auquel est confronté im est-ce dans des conditions normales tous les navigateurs sauf Firefox il ressemble à ceci lorsque vous passez la souris sur les éléments alt text http://www.freeimagehosting.net/uploads/4f5c4e70ab.png

Dans Firefox toutes les versions que je reçois ce alt text http://www.freeimagehosting.net/uploads/4c9689da0b.png

Toute aide serait génial! car c'est un problème que je n'arrive pas à résoudre et je suis sûr qu'il y a quelque chose qui me manque.

Answer 1

Votre balisage est vraiment moche pour commencer,

pourquoi ont <span> supplémentaires balises dans le haut niveau <li> balises, pourquoi emballer vos <img> étiquettes avec <em> et ne pas utiliser   à des fins de style.

Nettoyez-le d'abord. Deuxièmement, vous avez beaucoup de styles de position absolue et relative qui ne semblent pas nécessaires. Avez-vous essayé de styliser votre nav sans l'utilisation du positionnement relatif et absolu.

Le seul endroit où je vois un positionnement relatif utile ici est pour les petites images de flèches.

Essayez-le.

Answer 2

Vous pouvez donner une largeur explicite à chaque # zone-barre ul li (puisque c'est la largeur du li qui dépasse son contenu).

Vous pouvez donner à chaque li un ID ou une classe afin que vous puissiez contrôler leurs largeurs individuellement.