title: bootstrap 3 responsive multiple mega menu
body: <p>I work with bootstrap 3 and design mega menu navigation. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;nav class="navbar navbar-default"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"&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;a class="navbar-brand" href="#"&gt;MegaMenu&lt;/a&gt;
  
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse js-navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Collection &lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt;
  
                      &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;New in Stores&lt;/li&gt;
                                  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
                                      &lt;div class="carousel-inner"&gt;
                                          &lt;div class="item active"&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/254x150/3498db/f5f5f5/&amp;text=New+Collection" class="img-responsive" alt="product 1"&gt;&lt;/a&gt;
  
                                               &lt;h4&gt;&lt;small&gt;Summer dress floral prints&lt;/small&gt;&lt;/h4&gt; 
                                              &lt;button class="btn btn-primary" type="button"&gt;49,99 €&lt;/button&gt;
                                              &lt;button href="#" class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Add to Wishlist&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;!-- End Item --&gt;
                                          &lt;div class="item"&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/254x150/ef5e55/f5f5f5/&amp;text=New+Collection" class="img-responsive" alt="product 2"&gt;&lt;/a&gt;
  
                                               &lt;h4&gt;&lt;small&gt;Gold sandals with shiny touch&lt;/small&gt;&lt;/h4&gt; 
                                              &lt;button class="btn btn-primary" type="button"&gt;9,99 €&lt;/button&gt;
                                              &lt;button href="#" class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Add to Wishlist&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;!-- End Item --&gt;
                                          &lt;div class="item"&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/254x150/2ecc71/f5f5f5/&amp;text=New+Collection" class="img-responsive" alt="product 3"&gt;&lt;/a&gt;
  
                                               &lt;h4&gt;&lt;small&gt;Denin jacket stamped&lt;/small&gt;&lt;/h4&gt; 
                                              &lt;button class="btn btn-primary" type="button"&gt;49,99 €&lt;/button&gt;
                                              &lt;button href="#" class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Add to Wishlist&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;!-- End Item --&gt;
                                      &lt;/div&gt;
                                      &lt;!-- End Carousel Inner --&gt;
                                  &lt;/div&gt;
                                  &lt;!-- /.carousel --&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;View all Collection &lt;span class="glyphicon glyphicon-chevron-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;Dresses&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Unique Features&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Image Responsive&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Auto Carousel&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Newsletter Form&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Four columns&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-header"&gt;Tops&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Good Typography&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;Jackets&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Easy to customize&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Glyphicons&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Pull Right Elements&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-header"&gt;Pants&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Coloured Headers&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Primary Buttons &amp; Default&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Calls to action&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;Accessories&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Default Navbar&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Lovely Fonts&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Responsive Dropdown &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-header"&gt;Newsletter&lt;/li&gt;
                                  &lt;form class="form" role="form"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label class="sr-only" for="email"&gt;Email address&lt;/label&gt;
                                          &lt;input type="email" class="form-control" id="email" placeholder="Enter email"&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" class="btn btn-primary btn-block"&gt;Sign in&lt;/button&gt;
                                  &lt;/form&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
                              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="dropdown mega-dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Collection 2&lt;span class="glyphicon glyphicon-chevron-down pull-right"&gt;&lt;/span&gt;&lt;/a&gt;
  
                      &lt;ul class="dropdown-menu mega-dropdown-menu row"&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;New in Stores&lt;/li&gt;
                                  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
                                      &lt;div class="carousel-inner"&gt;
                                          &lt;div class="item active"&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/254x150/3498db/f5f5f5/&amp;text=New+Collection" class="img-responsive" alt="product 1"&gt;&lt;/a&gt;
  
                                               &lt;h4&gt;&lt;small&gt;Summer dress floral prints&lt;/small&gt;&lt;/h4&gt; 
                                              &lt;button class="btn btn-primary" type="button"&gt;49,99 €&lt;/button&gt;
                                              &lt;button href="#" class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Add to Wishlist&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;!-- End Item --&gt;
                                          &lt;div class="item"&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/254x150/ef5e55/f5f5f5/&amp;text=New+Collection" class="img-responsive" alt="product 2"&gt;&lt;/a&gt;
  
                                               &lt;h4&gt;&lt;small&gt;Gold sandals with shiny touch&lt;/small&gt;&lt;/h4&gt; 
                                              &lt;button class="btn btn-primary" type="button"&gt;9,99 €&lt;/button&gt;
                                              &lt;button href="#" class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Add to Wishlist&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;!-- End Item --&gt;
                                          &lt;div class="item"&gt; &lt;a href="#"&gt;&lt;img src="http://placehold.it/254x150/2ecc71/f5f5f5/&amp;text=New+Collection" class="img-responsive" alt="product 3"&gt;&lt;/a&gt;
  
                                               &lt;h4&gt;&lt;small&gt;Denin jacket stamped&lt;/small&gt;&lt;/h4&gt; 
                                              &lt;button class="btn btn-primary" type="button"&gt;49,99 €&lt;/button&gt;
                                              &lt;button href="#" class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; Add to Wishlist&lt;/button&gt;
                                          &lt;/div&gt;
                                          &lt;!-- End Item --&gt;
                                      &lt;/div&gt;
                                      &lt;!-- End Carousel Inner --&gt;
                                  &lt;/div&gt;
                                  &lt;!-- /.carousel --&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;View all Collection &lt;span class="glyphicon glyphicon-chevron-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;Dresses&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Unique Features&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Image Responsive&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Auto Carousel&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Newsletter Form&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Four columns&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-header"&gt;Tops&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Good Typography&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;Jackets&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Easy to customize&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Glyphicons&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Pull Right Elements&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-header"&gt;Pants&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Coloured Headers&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Primary Buttons &amp; Default&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Calls to action&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="col-sm-3"&gt;
                              &lt;ul&gt;
                                  &lt;li class="dropdown-header"&gt;Accessories&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Default Navbar&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Lovely Fonts&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Responsive Dropdown &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown-header"&gt;Newsletter&lt;/li&gt;
                                  &lt;form class="form" role="form"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label class="sr-only" for="email"&gt;Email address&lt;/label&gt;
                                          &lt;input type="email" class="form-control" id="email" placeholder="Enter email"&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" class="btn btn-primary btn-block"&gt;Sign in&lt;/button&gt;
                                  &lt;/form&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.nav-collapse --&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family:'Open Sans', 'sans-serif';
      background:#f0f0f0;
  }
  .navbar-nav&gt;li&gt;.dropdown-menu {
      margin-top:20px;
      border-top-left-radius:4px;
      border-top-right-radius:4px;
  }
  .navbar-default .navbar-nav&gt;li&gt;a {
      width:200px;
      font-weight:bold;
  }
  .mega-dropdown {
      position: static !important;
      width:100%;
  }
  .mega-dropdown-menu {
      padding: 20px 0px;
      width: 100%;
      box-shadow: none;
      -webkit-box-shadow: none;
  }
  .mega-dropdown-menu:before {
      content:"";
      border-bottom: 15px solid #fff;
      border-right: 17px solid transparent;
      border-left: 17px solid transparent;
      position: absolute;
      top: -15px;
      left: 285px;
      z-index: 10;
  }
  .mega-dropdown-menu:after {
      content:"";
      border-bottom: 17px solid #ccc;
      border-right: 19px solid transparent;
      border-left: 19px solid transparent;
      position: absolute;
      top: -17px;
      left: 283px;
      z-index: 8;
  }
  .mega-dropdown-menu &gt; li &gt; ul {
      padding: 0;
      margin: 0;
  }
  .mega-dropdown-menu &gt; li &gt; ul &gt; li {
      list-style: none;
  }
  .mega-dropdown-menu &gt; li &gt; ul &gt; li &gt; a {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: normal;
      line-height: 1.428571429;
      color: #999;
      white-space: normal;
  }
  .mega-dropdown-menu &gt; li ul &gt; li &gt; a:hover, .mega-dropdown-menu &gt; li ul &gt; li &gt; a:focus {
      text-decoration: none;
      color: #444;
      background-color: #f5f5f5;
  }
  .mega-dropdown-menu .dropdown-header {
      color: #428bca;
      font-size: 18px;
      font-weight:bold;
  }
  .mega-dropdown-menu form {
      margin:3px 20px;
  }
  .mega-dropdown-menu .form-group {
      margin-bottom: 3px;
  }
  </code></pre>
  
  <p>Now, i ahve two <code>&lt;ul&gt;</code> for navigation menu . in both i see one <code>sub menu</code>. me mean is  if i click in collection Or collection 2 i see one sub menu.</p>
  
  <p>how do can i fix this ?</p>
  
  <p><strong>Problem</strong> : <code>click on collection and collection 2 u see one submenu bottom of collection not for collection 2.</code></p>
  
  <p><img src="https://i.stack.imgur.com/Vq2CN.jpg" alt="enter image description here"></p>
  
  <blockquote>
    <p>Note: The Position of the arrow is to be changed. For both the dropdowns, the upward arrows indicate the same position. This position is to be changed like</p>
  </blockquote>
  
  <ol>
  <li>First Dropdown: <a href="https://i.imgur.com/Vklu5c1.png" rel="nofollow noreferrer">http://i.imgur.com/Vklu5c1.png</a> </li>
  <li>Second Dropdown: <a href="https://i.imgur.com/97Lhca3.png" rel="nofollow noreferrer">http://i.imgur.com/97Lhca3.png</a></li>
  </ol>
  
  <p><a href="http://jsfiddle.net/P56Cr/1/" rel="nofollow noreferrer">JSFIDDLE DEMO</a> </p>