I've used that type of mega menu style before in a few sites. Here is a snippet of css below that I use to get those columns like in your example. It assumes you're starting with the default seatle master, so if you've got your own custom master you might need to edit some of the classes.
#DeltaTopNavigation ul.static > li.dynamic-children > ul.dynamic {
top:auto!important;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.root UL.dynamic UL.dynamic {
display:block!important;
font-weight:normal;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.dynamic {
background-color:#cccccc;
display:table-row;
width:auto !important;
border-spacing:10px;
border:none;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.root > LI > UL.dynamic > LI {
display:table-cell;
font-weight:bold;
padding-right:5px;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.dynamic > LI > UL {
display:block !important;
width:auto;
left:0px !important;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox UL.dynamic > LI > UL > LI {
display:list-item;
margin-right:10px;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox .additional-background.dynamic-children,
#DeltaTopNavigation .nav .ms-core-listMenu-horizontalBox .dynamic .additional-background.dynamic-children {
background-image:none;
padding-right:0px;
}
#DeltaTopNavigation ul.dynamic > li.dynamic-children > ul {
position:relative !important;
left:0px !important;
top:0px !important;
width:auto;
box-shadow:none;
display:inline-block !important;
}
#DeltaTopNavigation li.dynamic > .menu-item {
height: auto;
line-height:normal;
padding: 5px 10px;
}
#DeltaTopNavigation .ms-core-listMenu-horizontalBox ul.root ul.dynamic > li a {
padding: 5px;
}