开发者

Dropdown showing differently in Firefox than in other browsers

开发者 https://www.devze.com 2023-01-06 19:52 出处:网络
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

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 开发者_Go百科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

Dropdown showing differently in Firefox than in other browsers

In Firefox all versions i get this

Dropdown showing differently in Firefox than in other browsers

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


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 &nbsp; 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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号