水平安排下拉子菜单项，包装（修改TwentyTwelve WordPress主题） [英] Arrange Drop-Down Submenu Items Horizontally, Wrapped (Modified TwentyTwelve WordPress Theme)

问题描述

我正在使用的网站使用修改后的WordPress TwentyTwelve主题。该主题的标准下拉菜单已修改，以在子菜单打开时将内容下推：

The site I'm working on uses the modified WordPress TwentyTwelve theme. The standard drop-down menu of that theme has been modified to push the content down when the submenu opens:

问题：我想安排子菜单整齐地沿着内容区域的整个宽度（960px宽），而不是让它们彼此下降。如果子菜单项的数量很大，我想要子菜单包裹几行，但是项目排列在整齐的垂直行。

Problem: I want to arrange the sub-menus neatly along the entire width of the content area (960px wide), rather than having them drop down under each other. If the number of submenu items is large, I want the submenu to wrap over several lines, but have the items arranged in neat vertical rows.

推荐答案

这是我的看法。当前，您的子菜单被限制到其父菜单。要实现你想要的，我想你需要做很多重组。我会保持你的子菜单分开，并将它们直接放在你的主菜单下面。你可以编写你的子菜单项来占据960px的宽度（手，我知道，即使你使用wordpress），如果需要设置较长的子菜单两行。给每个子菜单一个唯一的ID，并将其设置为在css中显示：none。您的主菜单li已经具有唯一标识符，因此您可以为特定的li创建css规则。像这样：

Here's how I see it. Currently your sub menus are constrained to its parent menu. To achieve what you want, I think you'd need to do quite a lot of restructuring. I would keep your sub menus separate and place them directly underneath your main menu. You can code your sub menu items to take up the 960px width (by hand I know, even though you're using wordpress), and if needs be set the longer sub menu into two lines. Give each sub menu a unique id and set them to display:none in css. Your main menus li's already have unique identifiers so then you can create css rules for the specific li's. Something like this:

#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/

Here is an example where you can see in action, I've used div's but you can change it accordingly: http://jsfiddle.net/H3WB6/

这篇关于水平安排下拉子菜单项，包装（修改TwentyTwelve WordPress主题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！