Question

我在jquery下拉导航菜单中遇到了一些问题，除了IE 7,8之外，它与所有浏览器一起工作正常。下面我附上了2张图片，并附上了css和标记，任何帮助都将受到高度赞赏，问候

下拉导航图像显示与所有其他浏览器（所需的输出） enter image description here 下拉导航图像显示与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＆amp;将position:relative提供给它的父级

的CSS：

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

使用IE中的jquery下拉导航菜单的问题

1 个答案: