我已经尝试了很多，但我无法解决这个问题，
菜单无法显示响应的问题。
我尝试像这个演示这样的响应式菜单
想要这样
HTML
<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>