css - 编辑/替换 Wordpress Twenty Twelve 默认菜单

Question

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

这是它在两个浏览器中的样子: 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，相对于它。如果您从 .main-navigation li 的 CSS 中删除 position-relative 并将其添加到 ul#menu-main，则 li.sub-menu 将相对于主导航 ul 定位，并且应该在浏览器中按您希望的方式运行。您可能希望将 .main-navigation li ul 的 top 从 100% 更改为 37px 所以它仍然位于正确的位置。

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