0

我正在尝试编辑 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;
    }
4

1 回答 1

0

正如您所说，您的问题是两种浏览器似乎以不同的方式处理您的问题position:absolute;。 position:absolute应该针对具有明确 set 的最新父元素进行计算position，这意味着它实际上是 Chrome 正在正确解释它。

在这种情况下，您给出.main-navigation li了一个position:relative，这意味着 Chrome 正在li.sub-menu相对于它定位子菜单 。如果您position-relative从 CSS for中删除.main-navigation li并将其添加到ul#menu-main，则将li.sub-menu相对于主导航 ul 定位，并且应该按照您希望的方式在浏览器中运行。您可能希望将.main-navigation li ul's topfrom更改为类似的100%东西，37px以便它仍然位于正确的位置。

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

于 2013-03-08T10:29:22.430 回答