Css 编辑/替换Wordpress Twenty12默认菜单

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

以下是它在两种浏览器中的外观： 铬：

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

到目前为止，这里是我的一些代码：

---

正如您所说，您的问题是，两个浏览器处理您的

position:absolute；

的方式似乎不同。

position:absolute

应该根据显式设置了

position

的最新父元素来计算，这意味着实际上是Chrome正确地解释了它

在这种情况下，您给了

.main navigation li

一个

位置：relative

，这意味着Chrome正在定位子菜单

li.sub menu

，相对于它。如果您从

的CSS中删除
position relative
，并将其添加到
ul#menu main
，则
li.sub menuu
将相对于主导航ul定位，并且应该按照您希望的方式跨浏览器运行。您可能需要更改
。主导航ul
的
顶部
从
100%
更改为类似
37px
，因此它仍然位于正确的位置

我也对您的JSFIDLE进行了更改：。
如果您将问题隔离到更小的代码块中，您更有可能得到建设性的答案。好的，我已经编辑并缩短了代码部分。有一个FIDLE显示了整个内容。我真的需要帮助！非常感谢！您的解释清晰而完美；我已经学到了很多今天我很高兴。非常感谢您的帮助，再次感谢您！我的问题还有第二部分：一旦您单击子菜单项并转到该页面，我需要子菜单行以粗体显示当前页面（子菜单项）。我已添加了
。主导航。当前菜单项{display:inline！important；}
但它只显示“当前"子菜单项，而不是整个列表。我担心这不是纯CSS，但可能需要编辑一些Wordpress行。有简单的方法吗？有JSFIDLE：很抱歉再次寻求帮助，但我在提问之前确实尝试过。作为一个问题比作为评论更好。但我已经在这里为您解决了：。您的问题是：当您需要为当前页面使用包含所有
ul.sub菜单li
的CSS时，您正在为
.current菜单项
指定行为，这只是一个li（我使用
.current page祖先
=li`，但您还有其他选择）.这太棒了，你是救世主！非常感谢你；我希望我有你的技能。再次感谢！下次我将把它作为一个问题而不是评论。
.main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
  .main-navigation .menu-item li {
        display: none;
        margin-right: 14px !important;
    }