下拉菜單不能在IE 10中工作

我的下拉菜單在Chrome中正常工作，但在IE 10中，當我將鼠標懸停在下拉菜單中時，它會中斷。下拉菜單不能在IE 10中工作

HTML：http://www.joekellywebdesign.com/churchsample/index.html

<div id="navmenudiv"> 
    <ul id="navmenu"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">About Us</a> 
     <div class='submenu-wrapper'> 
      <ul class="sub1"> 
       <li><a href="introduction.html">Introduction</a></li> 
       <li><a href="whoweare.html">Who We Are</a></li> 
       <li><a href="staff.html">Staff</a></li> 
      </ul> 
      </div>    
     </li> 
     <li><a href="services.html">Services</a> 
      <ul class="sub1"> 
       <li><a href="sundaymorning.html">Sunday Morning</a></li> 
       <li><a href="sundayevening.html">Sunday Evening</a></li> 
       <li><a href="wednesday.html">Wednesday Evening</a></li> 
      </ul> 
     </li> 
     <li><a href="resources.html">Resources</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
     <li><a href="news.html">News and Events</a></li> 
    </ul> 
</div>

CSS：http://www.joekellywebdesign.com/churchsample/css/styles.css

#navmenudiv { 
    z-index:60; 
    margin: -30px 0; 
    height:47px; 
    background-color:#5340BF; 
    top:40; 
    position: relative; 
    text-align:center; 
} 
/* rules for nav menu */ 
ul#navmenu, ul.sub1 { 
    list-style-type:none; 
} 
ul#navmenu > li { 
    margin-top: 10px; 
} 
ul#navmenu li { 
    width:125px; 
    text-align:center; 
    position:relative; 
    ; 
    margin-right:4px; 
    display: inline-block; 
    background-color:transparent 
} 
ul#navmenu a { 
    text-decoration:none; 
    border: 1px solid #CCC; 
    display:block; 
    width:125px; 
height 25px; 
    line-height:25px; 
    background-color:#FFF; 
    border-radius: 5px; 
} 
ul#navmenu .sub1 a { 
    margin-top: 3px; 
} 
ul#navmenu li:hover > a { 
    background-color:#CFC; 
} 
ul#navmenu li:hover a:hover { 
    background-color:#FF0; 
} 
ul#navmenu ul.sub1 { 
    display:none; 
    position:absolute; 
    top: 26px; 
    left: 0px; 
} 
ul#navmenu li:hover .sub1 { 
    display:block; 
} 
/* end rules for nav menu */

感謝

來源

2013-09-30 Joe Elmore

跳過您在html中執行的每一行後的換行符。不是一個解決方案，但它會讓你的代碼更具可讀性。 – Jonast92

附註：當我點擊該網站上的其中一個鏈接時，我笑了起來，並且把我帶到了「曾經覺得你在錯誤的地方？」錯誤頁面。太完美了。 – NotMe

你是什麼意思與休息和工作正常？我看到兩者都有相同的行爲。記住釋放你的緩存Ctrl F5通常在你對js/css進行任何改變的情況下工作。 – porfiriopartida

問題是你的下拉菜單項的邊距。如果刪除邊距，則不會發生問題。

更改此：

ul#navmenu .sub1 a { 
    margin-top: 3px; 
}

要這樣：

ul#navmenu .sub1 a { 
    margin-top: 0px; 
}

或者刪除這些三線都在一起。

來源

2013-10-03 01:00:11 3dgoo

謝謝。那樣做了。 –

嘗試使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

作爲你的文檔類型

來源

2013-09-30 22:57:59

嗯。這使得它更好，但當我懸停在子女之間時，它仍然會中斷 –

我不會使用XHTML文檔類型。要麼使用HTML 5的一個'<！DOCTYPE html>'或使用4.01 strict。 – NotMe

下拉菜單不能在IE 10中工作

回答

相關問題