Creating a SharePoint Mega Menu with CSS

Heather Solomon has a fantastic article on how to create a mega menu in SharePoint:

http://blog.sharepointexperience.com/2016/02/sptechcon-2016-css-session-recap/

I started with this, and was looking to create a three column mega menu, which wound up looking like this:

The setup for the navigation should just be like one level deep:

And the css, which will need some modification based on your column needs is below:

/* NAVIGATION (TOP NAV BAR) - DROP DOWN MENU

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Override jQueryUI.css */

#DeltaTopNavigation li.dynamic {

float: none !important;

}

/* Alter drop down menu placement */

.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover > ul.dynamic,

.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover-off > ul.dynamic{

top: 25px !important;  /* !important added to override inline SharePoint style */

left: -25px !important;  /* !important added to override inline SharePoint style */

}

/* Drop down menu container */

li.

li.static > ul.dynamic  {

width: 640px !important;  /* Needed to override generated inline style */

box-shadow: 0 0;

height: 365px !important;

height: auto;

padding: 0 0 1em;

}

/* Space out menu items and set parent positioning so child elements appear in the right location*/

li.static > ul.dynamic > li {

line-height: 1.8em;

position: relative;

}

/* Nav item formatting */

li.static > ul.dynamic > li.dynamic a,

li.static > ul.dynamic > li.dynamic a:link,

li.static > ul.dynamic > li.dynamic a:visited {

font-family: var(--font);

color: var(--sage);

font-size: 1.1em;

padding: 0 1em;

}

li.static > ul.dynamic > li.dynamic a:hover {

color: var(--sage);

background-color: var(--lightsage40);

}

/* Add "Sections" before nav items */

li.static > ul.dynamic > li:nth-child(1)::before {

content: "Corporate Services \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 Resources \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0Go To";

text-transform: uppercase;

font-family: Lato, sans-serif;

color: #ccc;

padding: .6em 1em;

display: block;

border-bottom: 1px solid #ccc;

text-align: left;

width: 600px;

margin-bottom: 10px !important;

}

/* Shift nav items to second column starting with nav item #IndexOfColumn2 */

li.static > ul.dynamic > li:nth-child(n+9) {

margin-left: 16em;

top: -287px !important;

}

/* Shift nav items to third column starting with nav item #IndexOfColumn3 */

li.static > ul.dynamic > li:nth-child(n+18) {

margin-left: 32em;

top: -610px !important;

vertical-align: top;

}