html - 水平排列下拉子菜单项，环绕(修改后的二十十二个 WordPress 主题)

Question

我正在使用的网站使用修改后的 WordPress TwentyTwelve 主题。该主题的标准下拉菜单已修改为在子菜单打开时向下推送内容:

问题:我想沿着内容区域的整个宽度(960 像素宽)整齐地排列子菜单，而不是让它们相互下拉。如果子菜单项的数量很大，我希望子菜单包含几行，但将元素排列成整齐的垂直行。

Answer 1

这是我的看法。目前，您的子菜单仅限于其父菜单。为了实现你想要的，我认为你需要做很多重组。我会将您的子菜单分开，并将它们直接放在主菜单下方。您可以对您的子菜单项进行编码以占用 960px 宽度(我知道是手工操作，即使您使用的是 wordpress)，并且如果需要将较长的子菜单设置为两行。给每个子菜单一个唯一的 id，并在 css 中将它们设置为 display:none。您的主菜单 li 已经具有唯一标识符，因此您可以为特定的 li 创建 css 规则。像这样:

#menu-item-58:hover + #submenu1 {display:block;}
#submenu1 {display:none;}
#submenu1:hover{display:block;} //so submenu doesn't disappear when mouse hovers over.

这是一个您可以看到实际效果的示例，我使用了 div，但您可以相应地更改它:http://jsfiddle.net/H3WB6/