IE7李ul下拉菜單上的錯誤

Question

希望你們中的一個人可以幫助我。

我有兩個下拉菜單的基本列表菜單。除IE6和IE7以外，所有瀏覽器都可以正常工作。請看看我的標記。

<nav> 
       <ul id="topNav" 
        ><li id="topNavFirst"><a href="../about/about.php" id="aboutNav">About Us</a></li 
        ><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a 
         ><ul id="subList1"><li><a href="../people/mike-hadfield.php">Mike Hadfield</a></li 
          ><li><a href="../people/karen-sampson.php">Karen Sampson</a></li 
          ><li><a href="../people/milhana-farook.php">Milhana Farook</a></li 
          ><li><a href="../people/kim-crook.php">Kim Crook</a></li 
          ><li><a href="../people/amanda-lynch.php">Amanda Lynch</a></li 
          ><li><a href="../people/gideon-scott.php">Gideon Scott</a></li 
          ><li><a href="../people/paul-fuller.php">Paul Fuller</a></li 
          ><li><a href="../people/peter-chaplain.php">Peter Chaplain</a></li 
          ><li><a href="../people/laura-hutley.php">Laura Hutley</a></li 
         ></ul 
        ></li 
        ><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a 
         ><ul id="subList2"><li><a href="../services/company-and-commercial.php">Company &amp; Commercial</a></li 
          ><li><a href="../services/employment.php">Employment</a></li 
          ><li><a href="../services/civil-litigation.php">Civil Litigation</a></li 
          ><li><a href="../services/debt-recovery.php">Debt Recovery</a></li 
          ><li><a href="../services/conveyancing.php">Conveyancing</a></li 
          ><li><a href="../services/commercial-property.php">Commerical Property</a></li 
          ><li><a href="../services/wills-and-probate.php">Wills &amp; Probate</a></li 
          ><li><a href="../services/family.php">Matrimonial &amp; Family</a></li 
        ></ul 
        ></li 
        ><li><a href="../news/news.php" id="newsNav">News</a></li 
        ><li><a href="../careers/careers.php" id="careersNav">Careers</a></li 
        ><li><a href="../contact/contact.php" id="contactNav">Contact</a></li 
       ></ul><!-- /topNav --> 
      </nav>​ 

和CSS

a {text-decoration:none;} 

#topNav { 
float:right; 
height:30px; 
margin:0; 
font-size:12px; 
} 

#topNav li { 
display:inline; 
float:left; 
list-style:none; 
color:#666; 
border-left: 1px solid #666; 
padding: 0 3px 0 3px; 
position:relative; 
} 

#topNav ul a { 
white-space:nowrap; 
} 

#topNav li a:hover { 
border-bottom:2px solid #369; 
} 

#topNavSecond a:hover { 
border-bottom:2px solid transparent !important; 
} 

#topNavFirst { 
border-left: 1px solid transparent !important; 
} 

/*****OUR-PEOPLE DROPDOWN*****/ 

#topNav ul{ 
background:#fff; 
border:1px solid #666; 
border-top:0px solid transparent; 
border-bottom:2px solid #666; 
list-style:none; 
position:absolute; 
left:-9999px; 
width:100px; 
text-align:left; 
padding:5px 0 5px 0px; 
margin:0 0 0 -4px; 
z-index:10; 
-webkit-box-shadow: 1px 1px 1px #666; 
-moz-box-shadow: 1px 1px 1px #666; 
box-shadow: 1px 1px 1px #666; 
vertical-align: bottom; 
} 

#topNav ul li{ 
display:block; 
border-left:0px; 
margin-bottom: 0px; 
padding:0; 
vertical-align: bottom; 
} 

#topNav ul a{ 
padding:0 0 0 5px;  
} 

#topNav li:hover ul{ 
left:auto; 
} 

#topNav li:hover a { 
color:#369; 
} 

#topNav li:hover ul a{ 
text-decoration:none; 
color:#666; 
} 

#topNav li:hover ul li a:hover{ 
color:#fff;; 
width:100%; 
border-bottom:0px solid transparent !important; 
} 

#topNav ul li:hover { 
background:#369; 
display: block; 
} 

#topNav ul li a { 
display: block; 
padding:0 0 0 4px; 
} 

/************/ 

/*****OUR-SERVICES DROPDOWN*****/ 

#topNavThird a:hover { 
border-bottom:2px solid transparent !important; 
} 

#topNavThird ul{ 
/*background:#fff url(images/service-ul-bg.png) no-repeat;*/ 
width:135px !important; 
/*margin-left:120px !important;*/ 
}​ 

腳本

jQuery(document).ready(function() { 

      $('#subList1').css("display", "none"); 
     $('#topNavSecond').hover(function() { 
      $('#subList1').stop(true, true).fadeIn('400'); 
     }, 
     function(){ 
      $('#subList1').stop(true, true).fadeOut('400'); 
     }); 
     $('#subList2').css("display", "none"); 
     $('#topNavThird').hover(function() { 
      $('#subList2').stop(true, true).fadeIn('400'); 
     }, 
     function(){ 
      $('#subList2').stop(true, true).fadeOut('400'); 
     }); 
    }); 

這工作完全

http://jsfiddle.net/BcWd9/6/

這裏是如何的屏幕截圖它看起來在IE7中。

hadfield.andymcnallydesign.co.uk/images/ie7-error.jpg

正如你所看到的UL在出現在李的權利，而不是左，它覆蓋在上面的列表。我嘗試刪除空白區域，但沒有運氣。有任何想法嗎？如果你們其中一位能夠提供幫助，我們將非常感謝。

Answer 1

試試這個，而不是使用left值來隱藏子菜單，請嘗試使用display: none;來代替。然後在翻轉時使用left和top進行定位。這在IE7中對於我來說似乎適用於Windows和Chrome/Firefox，儘管我無法在IE6中對其進行測試。

#topNav ul{ 
    background:#fff; 
    border:1px solid #666; 
    border-top:0px solid transparent; 
    border-bottom:2px solid #666; 
    list-style:none; 
    display: none; 
    width:100px; 
    text-align:left; 
    padding:5px 0 5px 0px; 
    margin:0 0 0 -4px; 
    z-index:10; 
    -webkit-box-shadow: 1px 1px 1px #666; 
    -moz-box-shadow: 1px 1px 1px #666; 
    box-shadow: 1px 1px 1px #666; 
    vertical-align: bottom; 
} 

. 
. 
. 

#topNav li:hover ul{ 
    display: block; 
    position: absolute; 
    left: 3px; 
    top: 14px; 
} 

下面是對的jsfiddle的更新版本：http://jsfiddle.net/BcWd9/5/

Answer 2

我有同樣的問題。它的工作對我來說，辦法是增加對鋰元素的顯式寬度被顯示在懸停

#nav li:hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    *zoom:1; /*IE7*/ 
    *width:12em; /*IE7*/ 
}