My show/hide button bootstrap on my navbar is not working

When my screen gets small and the toggle button shows while my menu disappears, when clicked it doesn't show my menu. Here is my codes.

     <div id="menu" class="navbar navbar-default navbar-fixed-top">
      <div class="navbar-header">
        <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse collapse"><span class="glyphicon glyphicon-th-list"></span></button>
        <div id="logo">
        <a href="#"><h3>Zaynee Corals</h3></a>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="nav active"><a href="#">Home</a></li>
        <li class="nav"><a href="about.html">About Us</a></li>
        <li class="nav"><a href="#">Training</a></li>
        <li class="nav"><a href="#">Shop</a></li>
        <li class="nav"><a href="gallery.html">Gallery</a></li>
        <li class="nav"><a href="#">Blog</a></li>
        <li class="nav"><a href="#">Contact</a></li>
      </ul>
    </div>        
  </div>