我的下拉菜单在 Chrome 中运行良好,但在 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 */
谢谢