Reply To: Mega Drop Down

[admin]

Hi,

Here is a basic example. Of course, you will need to add more styles for the headings, links, etc. but the layout part should be OK:

HTML:

...
<li><a href="#">Mega menu</a>
  <ul class="mega-menu">
    <li>
      <div class="row">
        <div class="col">
          <h2>Heading</h2>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
        <div class="col">
          <h2>Heading</h2>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</li>
...

CSS:

.mega-menu .row {
	width: 500px;
	max-width: 100%;
}
.mega-menu .row:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
}
.mega-menu .col {
	float: left;
	padding: 10px;
	width: 50%;
}
.mega-menu, .mega-menu ul {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}
.mega-menu ul {
	position: static;
	display: block !important;
}
.mega-menu ul li {
	/* ... */
}
.mega-menu ul a {
	/* ... */
}

Cheers!