我遇到了一些問題,jquery下拉菜單導航,其工作正常,除了IE瀏覽器7,8以外的所有瀏覽器。 下面我已附加了2個圖像和已包括用於它的CSS和標記,任何協助將高度讚賞,視在IE瀏覽器中使用jquery下拉導航菜單的問題
下拉導航圖像顯示與所有其他的瀏覽器(要求輸出) 下拉導航圖像顯示用IE(子菜單下面開始公司,它應該開始只是下面的產品)
CSS:
.hide {
display:none;
}
.nave {
width:960px;
padding:10px 0px 0px 10px;
margin:0 auto;
}
.quiklinks
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 45px;
font-family: Tahoma, Arial;
font-size: 12px;
text-align: center;
clear: both;
float: left;
width: 960px;
background: url('../Images/navebg.png') no-repeat left top;
}
.quiklinks ul {
margin:0px;
padding:0px;
}
.quiklinks li
{
margin: 0px;
padding: 0px;
float: left;
display: block;
background: url('../Images/divider.png') no-repeat left top;
height: 45px;
float: left;
}
.quiklinks li a {
display:block;
height:41px;
text-decoration:none;
color:#ebeaea;
font-weight:bold;
line-height:35px;
padding:2px 20px 0px 20px;
float:left;
}
.quiklinks li a:hover {
display:block;
height:41px;
text-decoration:none;
font-weight:bold;
line-height:35px;
padding:2px 20px 0px 20px;
float:left;
}
/*style the sub menu*/
.quiklinks .ul-links li ul
{
position:absolute;
visibility: hidden;
margin: 0;
padding: 0;
z-index: 100;
top: 52px;
}
.quiklinks .ul-links li ul li
{
display: inline;
height: 35px;
float: none;
margin: 0;
padding: 0;
background-image: none !important;
}
.quiklinks .ul-links li ul li a:link, .quiklinks .ul-links li ul li a:visited
{
background: url('../Images/nav-ul-li.png') repeat-x left top;
width: 100px;
text-decoration: none;
font-size: 12px;
color: #FFFFFF;
height: 35px;
font-weight: bold;
}
.quiklinks .ul-links li ul li a:hover
{
background: url('../Images/nav-ul-li-hover.png') repeat-x 0px 0px;
}
HTML標記:
<script type="text/javascript">
$(document).ready(function() {
$('.ul-links > li').bind('mouseover', openSubMenu);
$('.ul-links > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').css('visibility', 'visible');
};
function closeSubMenu() {
$(this).find('ul').css('visibility', 'hidden');
};
});
</script>
<div class="nave">
<div class="quiklinks">
<ul class="ul-links">
<li><a href="/" id="quiklinks_01">Home</a><span class="hide">Home</span></li>
<li><a href="#" rel="nofollow" id="quiklinks_02">News</a><span class="hide">About us</span></li>
<li><a href="/business-customers.aspx" rel="nofollow" id="quiklinks_03">Products</a><span class="hide">Business Customers</span></li>
<li><a href="/security.aspx" rel="nofollow" id="quiklinks_04">Latest Products</a><span class="hide">Security</span>
<ul>
<li>
<a href="/products/carpets.aspx" >Product1</a>
</li>
<li>
<a href="/products/laminates.aspx" >Product2</a>
</li>
<li>
<a href="/products/vinyls.aspx" >Product3</a>
</li>
</ul>
</li>
<li><a href="/shippingInfo.aspx" rel="nofollow" id="quiklinks_06">Company</a><span class="hide">Delivery Information</span></li>
<li><a href="/articles.aspx" id="quiklinks_09">Ordering</a><span class="hide">Articles & Reviews</span></li>
<li><a href="/help.aspx" rel="nofollow" id="quiklinks_08">Contact</a><span class="hide">Help</span></li>
<li><a href="/contactus.aspx" rel="nofollow" id="quiklinks_07">Links</a><span class="hide">Contact Us</span></li>
</ul>
你沒有說什麼是IE 7和8(它是如何呈現,有什麼不工作)的問題。在css和openSubMenu和closeSubMenu JavaScript函數中引用的圖片不包含在內,因此沒有人可以重現該菜單來檢查是什麼。 –
好吧,如果你看到附加的圖片,在IE中的子菜單行爲與其他瀏覽器相比有點不同,我想讓子菜單啓動正好低於最新產品,但在IE中它從公司 –
嘗試給'.quiklinks .ul鏈接li ul'屬性left:0;' – rickyduck