Mega Drop Down

[roberteau]

Hello,

I’m new to smart menus and CSS…. and im trying to add Unordered List inside the Mega drop down:
I want to achieve something like http://postimg.org/image/hsthui5wz/
categories sitting next to each other with different links inside blocks.

can you please give me a starting point?

thanks

[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!

[roberteau]

Thank you so much man, this is really helpful. cheers

[Author]

Posts