html - 子菜单 - 某些浏览器的定位错误

Question

我现在写了一个自己的 wordpress 主题，但子菜单有问题。我希望在将鼠标悬停在下面示例中的“事件”链接上后出现子菜单。在某些浏览器中，子菜单显示在“事件”链接下，左侧有 5 像素的边距。这可以。在其他浏览器（Win 7 上的 Firefox 17）中，子菜单显示在“事件”链接的右侧，而不是应有的“事件”文本下方。

有人知道为什么会发生这种情况以及我该如何摆脱它？

谢谢。

示例：http ://codepen.io/anon/pen/pqAIy

Answer 1

您需要更改的是代码的这一部分：

.menu-item:hover .sub-menu {
        display: inline-block;
        position: absolute;
}

对此：

.menu-item:hover .sub-menu {
        display: block;
        position: absolute;
}

（所以内联块到块）在 IE9+、Mz FF、Chrome 和 Safari 中测试和工作

Answer 2

现在添加此代码

nav .menu li {
position:relative;
}

nav .menu li:hover .sub-menu {
    display:block;
        left:0;right:0;top:18px;
        position: absolute;
}

演示

此代码是通用的 运行所有最新和标准浏览器