Question

我正在尝试编辑Wordpress TwentyTwelve主题的默认菜单。到目前为止，我已经使子菜单水平，但它们在Firefox中的排列方式与Chrome不同。在Ff中，它看起来像我想要的，但在Chrome中，子菜单与之前单击的菜单项对齐，而不是主菜单的最左侧。基本上，我想要一个水平的两行菜单。我无法得到“位置：”“正确。以下是两种浏览器的外观：

以下是两种浏览器的外观：铬： http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/

我无法发布更多链接，因为我需要10个声望，但第二个图像（Firefox中的菜单）也在那里。

到目前为止，这是我的代码的一小部分： http://jsfiddle.net/ZN9my/

.main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
  .main-navigation .menu-item li {
        display: none;
        margin-right: 14px !important;
    }

Answer 1

正如您所说，您的问题是两个浏览器似乎都以不同的方式处理您的position:absolute;。 position:absolute应根据明确设置position的最新父元素进行计算，这意味着它实际上是正确解释它的Chrome。

在这种情况下，您已.main-navigation li一个position:relative，这意味着Chrome会相对于它定位子菜单li.sub-menu。如果您从position-relative的CSS中删除.main-navigation li并将其添加到ul#menu-main，那么li.sub-menu将相对于主导航ul定位，并且应该按照您的需要运行跨浏览器。您可能希望将.main-navigation li ul的{{1}}从top更改为100%，以便它仍然位于正确的位置。

我也对你的jsfiddle进行了更改：http://jsfiddle.net/ZN9my/1/。

编辑/替换Wordpress TwentyTwelve默认菜单

1 个答案: