Bootstrap Collapsed menu dissappears when click - html

Question

The menu drop downs for a brief second and then goes back up. Can anyone please help in fixing it? If someone could suggest me a code to make it work then that would be even better.
This is the code:
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</nav>

Answer 1

You are using Bootstrap version 2.3.2 CSS with Bootstrap version 3.3.6 Javascript. They are not compatible with each other. You need to use the same version of Bootstrap for both CSS and Javascript to get the correct behavior.
(It would have been helpful if you had included the URL to the site you need help with.)

Answer 2

Here you go with a solution https://jsfiddle.net/wqy986bt/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>
There are few things:
You have an extra closing div at the end of your code
Check the ordering of the library file
bootstrap CSS
jQuery
bootstrap JS
I've used bootstrap v3.3.7 and jQuery v2.1.1 (in snippet) and jQuery v2.2.4 (in jsfiddle)
Hope this will help you.