title: bootstrap 3 responsive mega menu
body: <p>i have tried a lot, but i can't solve this problem,</p>
  
  <p>problem as menu is can't show responsive.</p>
  
  <p>i try responsive menu like this <strong><a href="http://jsfiddle.net/LAwjG/" rel="nofollow noreferrer">Demo</a></strong></p>
  
  <p>And Want Like this <img src="https://i.stack.imgur.com/6sQUD.jpg" alt="Image"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li id="fat-menu" class="dropdown pink"&gt; &lt;a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown"&gt;Services &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li id="fat-menu" class="dropdown rama"&gt; &lt;a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown"&gt;Products &lt;/a&gt;
              &lt;div class="dropdown-menu" style="left:-250px !important; width:800px; " role="menu" aria-labelledby="drop3"&gt;
                &lt;div class="nav-product"  role="main"&gt;
                  &lt;div class="col-lg-4"&gt;
                    &lt;div class="media"&gt; &lt;img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4 class="pink"&gt;Labour Manage. System&lt;/h4&gt;
                        &lt;p&gt;There Managing Contractor's Labours / Workers at the entry points with rich GUI... &lt;a href="#"&gt;Read More&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="media"&gt; &lt;img src="img/crm-nav-icon.png" alt="eXiger CRM System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4 class="rama" &gt;eXiger CRM System&lt;/h4&gt;
                        &lt;p&gt;awidely implemented strategy for managing a company's interactions with customers....&lt;a href="#"&gt;Read More&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="media"&gt; &lt;img src="img/payroll-nav-icon.png" alt="Payroll Management" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4 class="blue"&gt;Payroll Management&lt;/h4&gt;
                        &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-4"&gt;
                    &lt;div class="media"&gt; &lt;img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4&gt;Subheading&lt;/h4&gt;
                        &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="media"&gt; &lt;img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4&gt;Subheading&lt;/h4&gt;
                        &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="media"&gt; &lt;img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4&gt;Subheading&lt;/h4&gt;
                        &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-4 "&gt;
                    &lt;div class="media"&gt; &lt;img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4&gt;Subheading&lt;/h4&gt;
                        &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="media"&gt; &lt;img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4&gt;Subheading&lt;/h4&gt;
                        &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="media"&gt; &lt;img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/&gt;
                      &lt;div class="media-body"&gt;
                        &lt;h4&gt;Subheading&lt;/h4&gt;
                        &lt;p&gt;Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li id="fat-menu" class="dropdown green"&gt; &lt;a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown"&gt;Technology &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li id="fat-menu" class="dropdown purple"&gt; &lt;a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown"&gt;Marketing &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li id="fat-menu" class="dropdown orange"&gt; &lt;a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown"&gt;About Us &lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="pinkdark"&gt;&lt;a href="#" &gt;Request a Quote&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  </code></pre>