Question

I am having some problems with the jquery drop down navigation menu , its working fine with all the browsers apart from IE 7,8.
Below I have attached the 2 images and have included the css and markup for it , Any assistance will be highly appreciated, regards

Dropdown Navigation image display with all other browsers(required output)

Dropdown Navigation image display with IE (submenu is starting below company , it should start just below the products)

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 Markup:

     <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; as ricky said give left:0; to your .quiklinks .ul-links li ul & give position:relative to it’s parent

css:

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