Firefox Problem
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> 
         <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>

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 
![alt text][1]

In Firefox all versions i get this
![alt text][2]

Any help would be great! as this is a problem which i cannot seem to fix and im sure there is something im missing.


  [1]: http://www.freeimagehosting.net/uploads/4f5c4e70ab.png
  [2]: http://www.freeimagehosting.net/uploads/4c9689da0b.png
Firefox Problem
===

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> 
         <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>

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 
![alt text][1]

In Firefox all versions i get this
![alt text][2]

Any help would be great! as this is a problem which i cannot seem to fix and im sure there is something im missing.


  [1]: http://www.freeimagehosting.net/uploads/4f5c4e70ab.png
  [2]: http://www.freeimagehosting.net/uploads/4c9689da0b.png