我的下拉菜單在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 */
感謝
跳過您在html中執行的每一行後的換行符。不是一個解決方案,但它會讓你的代碼更具可讀性。 – Jonast92
附註:當我點擊該網站上的其中一個鏈接時,我笑了起來,並且把我帶到了「曾經覺得你在錯誤的地方?」錯誤頁面。太完美了。 – NotMe
你是什麼意思與休息和工作正常?我看到兩者都有相同的行爲。記住釋放你的緩存Ctrl F5通常在你對js/css進行任何改變的情況下工作。 – porfiriopartida