부트 스트랩 3 반응 메가 메뉴

Question

많이 시도했지만이 문제를 해결할 수 없습니다.

문제는 메뉴가 응답 할 수 없으므로 표시 할 수 없습니다.

내가이 Demo

처럼 반응하는 메뉴를 시도하고 후반, 내가 만든 것 그렇지 않으면이

HTML과 마찬가지로 부트 스트랩 3 http://geedmo.github.io/yamm3/이 megamenu을

<div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li id="fat-menu" class="dropdown pink"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Services </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li id="fat-menu" class="dropdown rama"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Products </a> 
      <div class="dropdown-menu" style="left:-250px !important; width:800px; " role="menu" aria-labelledby="drop3"> 
       <div class="nav-product" role="main"> 
       <div class="col-lg-4"> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4 class="pink">Labour Manage. System</h4> 
         <p>There Managing Contractor's Labours/Workers at the entry points with rich GUI... <a href="#">Read More</a></p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/crm-nav-icon.png" alt="eXiger CRM System" class="pull-left"/> 
        <div class="media-body"> 
         <h4 class="rama" >eXiger CRM System</h4> 
         <p>awidely implemented strategy for managing a company's interactions with customers....<a href="#">Read More</a></p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/payroll-nav-icon.png" alt="Payroll Management" class="pull-left"/> 
        <div class="media-body"> 
         <h4 class="blue">Payroll Management</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
       </div> 
       <div class="col-lg-4 "> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      </li> 
      <li id="fat-menu" class="dropdown green"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Technology </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li id="fat-menu" class="dropdown purple"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Marketing </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li id="fat-menu" class="dropdown orange"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">About Us </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li class="pinkdark"><a href="#" >Request a Quote</a></li> 
     </ul> 
     </div> 

Answer 1

를 원하십니까 아마도 아이디어를 얻는 데 도움이 될 것입니다.