Html 在Firefox中显示的下拉列表与在其他浏览器中显示的不同

我的Firefox有问题我的网站顶部有一个下拉菜单这是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;
}

这是我的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>

你可以在doctorwhohd.com上看到一个现场演示

我所面临的问题是，除了Firefox之外，在所有浏览器中，当你将鼠标悬停在这些项目上时，都是这样

在Firefox的所有版本中，我都能看到这个

任何帮助都会很好！因为这是一个我似乎无法解决的问题，我确信我缺少了一些东西。

您可以为每个区域栏ulli指定一个明确的宽度（因为超出其内容的是li的宽度）

---

您可能希望为每个li提供一个ID或类，以便您可以单独控制它们的宽度。

对于初学者来说，您的标记非常难看

为什么在顶层的

标签中有额外的
标签，为什么用
包装您的
标签，而不使用
进行样式设计

先把它清理干净

第二，您有很多绝对和相对位置样式，它们似乎不是必需的。您是否尝试过在不使用相对和绝对定位的情况下设置导航样式

我认为相对定位在这里唯一有用的地方是小箭头图像

试试看