在IE浏览器中使用jquery下拉导航菜单的问题

Question

我遇到了一些问题，jquery下拉菜单导航，其工作正常，除了IE浏览器7,8以外的所有浏览器。 下面我已附加了2个图像和已包括用于它的CSS和标记，任何协助将高度赞赏，视

下拉导航图像显示与所有其他的浏览器（要求输出） 下拉导航图像显示用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> 

Answer 1

@Mr A;作为瑞奇说给left:0;你.quiklinks .ul-links li ul &给position:relative到它的父

CSS：

.quiklinks .ul-links li ul{ 
position:absolute; 
left:0; 
top: 52px; 
} 
.quiklinks .ul-links li{ 
    position:relative; 
    }