Dropdown showing differently in Firefox than in other browsers - html

Question

I have a problem with Firefox I have a drop down menu at the top of my website this is the code for the 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;
}
This is my HTML code
<div id="zone-bar">
<ul><li>
<span>My Account <em><img src="images/arrow.png" alt="dropdown"></em></span>
<ul>
<li>My Account</li>
<li>My Channel</li>
<li>My Videos</li>
<li>Favorites</li>
<li>Playlists</li>
<li>Friend Requests (1)</li>
<li>Logout</li>
</ul></li>
<li>
<span>Messages <em><img src="images/arrow.png" alt="dropdown"></em></span>
<ul>
<li>Messages (1)</li>
<li>Compose New Message</li>
<li>Notifications (0)</li>
</ul></li>
<li>
<span>Videos <em><img src="images/arrow.png" alt="dropdown"></em></span>
<ul>
<li>Recent</li>
<li>Viewed</li>
<li>Featured</li>
<li>Top Rated</li>
<li>Commented</li>
</ul></li>
<li>
<span>Channels <em><img src="images/arrow.png" alt="dropdown"></em></span>
<ul>
<li>Recent</li>
<li >Viewed</li>
<li >Featured</li>
<li >Top Rated</li>
<li >Commented</li>
</ul></li>
<li>
<span>Groups <em><img src="images/arrow.png" alt="dropdown"></em></span>
<ul>
<li>Create New Group</li>
<li>All Time</li>
<li>Today</li>
<li>Yesterday</li>
<li>This Week</li>
<li>Last Week</li>
<li>This Month</li>
<li>Last Month</li>
<li>This Year</li>
<li>Last Year</li>
</ul></li>
<li>
<span>Upload <em><img src="images/arrow.png" alt="dropdown"></em></span>
<ul>
<li>Upload New Video</li>
<li>My Videos</li>
</ul></ul>
</div>
you can see a live demo at doctorwhohd.com
The problem im facing is this in normal all browsers except Firefox it looks like this when you hover over the items
In Firefox all versions i get this
Any help would be great! as this is a problem which i cannot seem to fix and im sure there is something im missing.

Answer 1

Your markup is really ugly for starters,
why have extra <span> tags in the top level <li> tags, why wrap your <img> tags with <em> and don't use for styling purposes.
Clean that up first.
Second, you have a lot of absolute and relative position styles that don't appear to be necessary. Have you tried styling your nav without the use of relative and absolute positioning.
The only place I see relative positioning being useful here is for the little arrow images.
Try that out.

Answer 2

You can give each #zone-bar ul li an explicit width (since it is the width of the li that is overrunning its content).
You may want to give each li an ID or class so that you can control their widths individually.