问题
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:
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.
回答1:
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.
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/
来源：https://stackoverflow.com/questions/15975772/arrange-drop-down-submenu-items-horizontally-wrapped-modified-twentytwelve-wor