Проблемы с выпадающим меню навигации с использованием jquery в IE

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

@ Мистер А;как сказал Рикки, передайте left:0; вашему .quiklinks .ul-links li ul и задайте позицию: относительно его родителя

css:

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