Arrange Drop-Down Submenu Items Horizontally, Wrapped (Modified TwentyTwelve WordPress Theme)

1 Views

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.

Post Views: 1

Related posts

Leave a Reply

1 comment

  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/