编辑/替换WordPress的TwentyTwelve默认菜单

我试图编辑Wordpress TwentyTwelve主题的默认菜单。到目前为止，我已经使子菜单处于水平状态，但是它们在Firefox中与Chrome不同。在Ff中看起来像我想要的，但在Chrome中，子菜单与先前点击过的菜单项对齐，而不是在主菜单的最左侧。基本上我想要一个水平的两行菜单。我不能得到的，更‘的位置：’”正确这里是它的外观在这两种浏览器：编辑/替换WordPress的TwentyTwelve默认菜单

这里是它的外观在这两种浏览器：铬： 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; 
    }

来源

2013-03-02 Oh_Franck

如果您将问题隔离到较小的代码块，则更有可能得到建设性答案。 – ASGM 2013-03-02 20:41:54

好吧，我编辑并缩短了代码部分。有一个小提琴可以显示整个事情。我真的需要帮助！ – 2013-03-08 10:07:23

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

在这种情况下，您已给出.main-navigation li a 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/。

来源

2013-03-08 10:29:22 ASGM

非常感谢你！你的解释清楚而完美;今天我学到了一些东西。非常感谢您的帮助，再次感谢您！ – 2013-03-08 12:38:19

我很高兴有帮助！ – ASGM 2013-03-08 13:00:53

我有我的问题的第二部分：一旦你点击一个子菜单项并进入该页面，我需要子菜单行保持显示完整与当前页面（子菜单项）粗体。我已添加 '.main-navigation .current-menu-item { \t \t display：inline！important; \t}' 但它只显示“当前”子菜单项，而不是整个列表。我担心这不是纯粹的CSS，但可能需要编辑一些Wordpress行。有没有简单的方法？有jsfiddle： [链接]（http://jsfiddle.net/v95Bg）我很抱歉再次寻求帮助，但我真的尝试之前询问。 – 2013-03-09 10:36:25

编辑/替换WordPress的TwentyTwelve默认菜单

回答

相关问题