Multi-column navigation dropdown

Developer Support CMS Development
, ,
2

@sarahbaker,

You have 2 pretty simple options:

1. Use one advanced menu - Your example shows 3 menus but it could very possibly be just one. When you have multi-level menus what you actually have is nested <ul> elements. That looks like this:

<ul>
 <li><a href=#">level 1 item</a>
 <ul>
 <li><a href="#">level 2 item</a></li>
 </ul>
 </li>
</ul>

So you can consider the section heades in your example the level 1 items, and the menus below them to be the level 2 items. All you need to do is style them this way.

Example:

ul {
 /*Level 1 unordered list styling */
}

ul > li {
 /*Level 1 list item styling */
} 

ul > li a {
 /*Level 1 link styling */
}

ul li ul {
 /* level 2 unordered list styling */
}

ul li ul li {
 /* level 2 list item styling */
}

ul li ul li a {
 /* level 2 link styling */
}

2. Use h4 header modules for your list titles and create an advanced menu for each section. Easier to set up, a little boring and uninspired, and involves more advanced menus (i.e. Footer Menu 1, Footer Menu 2, Footer Menu 3) in your advanced menu section. but you could set this up your self for sure and possible style it depending on your knowledge of css and the use of the browser console (ctrl or cmd + shift + i).