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

【问题标题】：Drop down menu not working in IE 10下拉菜单在 IE 10 中不起作用
【发布时间】：2013-10-06 22:49:51
【问题描述】：

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

谢谢

【问题讨论】：

在您在 html 中执行的每一行之后跳过换行符。不是一个解决方案，但它会让你的代码更具可读性。
旁注：当我点击该网站上的一个链接时，我笑了，它把我带到了“有没有觉得你在错误的地方？”错误页面。太完美了。
休息和工作正常是什么意思？我在两者中都看到了相同的行为。如果您对 js/css 进行了任何更改，请记住释放缓存 Ctrl F5 通常会起作用。
@porfiriopartida：我注意到在 IE10 中，当我尝试转到关于我们下的子选项之一时，菜单就会消失。菜单选项之间的间距太大，IE 失去悬停。
我使用的是 IE 10。当我将鼠标悬停在儿童“简介”和“我们是谁”之间时，除非我做得很快，否则下拉菜单会消失。我没有看到我在哪里设置了任何间距。

标签： html css internet-explorer

【解决方案1】：

问题在于下拉菜单项的边距。如果您删除边距，则不会发生问题。

改变这个：

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

到这里：

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

或者一起删除这 3 行。

【讨论】：

【解决方案2】：

尝试使用

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

作为您的文档类型

【讨论】：

嗯。这使它变得更好，但是当我在孩子之间徘徊时它仍然会中断
我不会使用 XHTML 文档类型。使用 HTML 5 one <!DOCTYPE html> 或使用 4.01 strict。