title: Bootstrap - Yamm Mega Menu - Multi dropdown
body: <p>I'm using the Yamm mega menu for Bootstrap 3 and need a multi dropdown to work as a grid.</p>
  
  <p>The first dropdown section is within the first 4 column grid, then the second half of the dropdown should go into the second 4 column grid and lastly the third one goes into the final 4 column grid.</p>
  
  <p><a href="http://geedmo.github.io/yamm3/#navbar-collapse-grid" rel="nofollow">http://geedmo.github.io/yamm3/#navbar-collapse-grid</a></p>
  
  <p>Something similar to this <a href="http://www.bentleymotors.com/en.html" rel="nofollow">http://www.bentleymotors.com/en.html</a> but without all the moving animation. Bare in mind to activate parts of the dropdown, you need to click on the arrows to the right. Something I didn't find obvious at first.</p>
  
  <p>This is what I have so far, I must warn you that it currently isn't within a grid, because when I tried, it just broke the whole dropdown. I'm guessing that I shouldn't do the CSS only version of a multi dropdown and instead use some javascript and somehow separate it into their own divs. Please not that there could also be more than one multi dropwdown within the nav, but they should always be 3 levels deep max.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class="navbar yamm navbar-default"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="grid"&gt;
            &lt;div class="row"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown yamm-fw"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Some action&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Some other action&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li class="dropdown-submenu"&gt;
              &lt;a tabindex="-1" href="#"&gt;Hover me for more options&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                &lt;li class="dropdown-submenu"&gt;
                  &lt;a href="#"&gt;Even More..&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3rd level&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Second level&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>img { width: 100%; }
  .carousel {
      height: 700px;
      overflow: hidden;
  }
  .navbar-default .navbar-nav&gt;li&gt;a, .navbar-default .navbar-nav&gt;li&gt;a:hover {
      color: #fff;
  }
  .carousel-inner&gt;.item&gt;a&gt;img, .carousel-inner&gt;.item&gt;img, .img-responsive, .thumbnail a&gt;img, .thumbnail&gt;img {
      margin-top: -100px;
  }
  h2, h2 a, h2 a:hover {
      color: #0a7a3f;
      margin-top: 20%;
  }
  h2 a:hover {
      text-decoration: none;
  }
  .navbar{
      margin-bottom: 0;
  }
  .navbar-nav {
      margin: 0 auto;
      display: table;
      table-layout: fixed;
      float:none;
  }
  .navbar-default {
      background: #0a7a3f;
      border: none;
  }
  .grid { padding: 10px; }
  @media (min-width: 768px) {
  .navbar {
      border-radius: 0;
  }
  }
  .navbar-default .navbar-nav&gt;.active&gt;a, .navbar-default .navbar-nav&gt;.active&gt;a:focus, .navbar-default .navbar-nav&gt;.active&gt;a:hover,
  .navbar-default .navbar-nav&gt;.open&gt;a, .navbar-default .navbar-nav&gt;.open&gt;a:focus, .navbar-default .navbar-nav&gt;.open&gt;a:hover{
      background-color: #fff;
      color: #000;
  }
  .dropdown-submenu {
      position: relative;
  }
  
  .dropdown-submenu&gt;.dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -6px;
      margin-left: -1px;
      -webkit-border-radius: 0 6px 6px 6px;
      -moz-border-radius: 0 6px 6px;
      border-radius: 0 6px 6px 6px;
  }
  
  .dropdown-submenu:hover&gt;.dropdown-menu {
      display: block;
  }
  
  .dropdown-submenu&gt;a:after {
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 5px 0 5px 5px;
      border-left-color: #ccc;
      margin-top: 5px;
      margin-right: -10px;
  }
  
  .dropdown-submenu:hover&gt;a:after {
      border-left-color: #fff;
  }
  
  .dropdown-submenu.pull-left {
      float: none;
  }
  </code></pre>
  
  <p>EDIT: JSFiddle - <a href="http://jsfiddle.net/kr1j2gbu/" rel="nofollow">http://jsfiddle.net/kr1j2gbu/</a></p>