Question

我现在写了一个自己的wordpress主题，并且子菜单有问题。我希望将鼠标单击鼠标悬停在下面示例中的“事件”链接上。在某些浏览器中，子菜单显示在“事件”链接下，左侧有5px的边距。这可以。在其他浏览器（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＆amp; Safari浏览器

Answer 2

现在添加此代码

nav .menu li {
position:relative;
}

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

<强> Demo

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

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

2 个答案: