我有Firefox的一个问题,我在我的网站的顶部的下拉菜单,这是对CSS代码Firefox的问题
#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 <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 <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 <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 <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 <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 <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上看到现场演示
im正面临的问题是,除了Firefox之外,普通的所有浏览器都是这样,当你将鼠标悬停在项目上时,它看起来像这样 alt text http://www.freeimagehosting.net/uploads/4f5c4e70ab.png
在Firefox所有版本我得到这个 alt text http://www.freeimagehosting.net/uploads/4c9689da0b.png
任何帮助将是巨大的!因为这是我似乎无法修复的问题,并且我确定有一些遗漏。
感谢您的帮助,我正在慢慢学习。 – cameronmarklewis 2010-07-07 19:42:57