Question

我的下拉菜单在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 */

由于

Answer 1

问题是下拉菜单项的边距。如果删除边距，则不会出现问题。

改变这个：

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

对此：

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

或者一起删除这3行。

Answer 2

尝试使用

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

作为您的Doctype

下拉菜单在IE 10中不起作用

2 个答案: