Here's an [mvce](https://stackoverflow.com/help/mcve) of your code with the applicable libraries - there are several issues with the structure of the HTML according to the Bootstrap spec





    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <nav class="col-md-12 navbar" role="navigation">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="container">
        <div id="navbarCollapse" class="collapse navbar-collapse">
          <ul class="nav nav-justified main-nav">
            <li class="menu-item current-menu-item"><a href="#">Home</a></li>
            <li class="menu-item submenu"><a href="#">Submenu</a>
              <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>



Here's a simple, working navbar taken from [Bootstrap's Docs on Collapse](https://getbootstrap.com/docs/3.3/javascript/#collapse):






    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <nav class="navbar navbar-default">
      <div class="container-fluid">
        
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" aria-expanded="false"
            data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                 aria-haspopup="true" aria-expanded="false">
                Submenu <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
       </div>
       
       
      </div>
    </nav>




I would recommend starting with the standard templates from the docs and then adapting them to your particular use case.

I've been struggling with not working collapse animation. The animation is not working when I click on the toggle button. After 1 second, the whole menu appears without animation, similar to the jQuery function `show()`

Here's my code:



    <nav class="col-md-12 navbar navbar-static-top" role="navigation">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="container">
        <div id="navbarCollapse" class="collapse navbar-collapse">
          <ul class="nav nav-justified main-nav">
            <li class="menu-item current-menu-item"><a href="#">Home</a></li>
            <li class="menu-item submenu"><a href="#">Submenu</a>
              <ul>
                <li>test</li>
                <li>test</li>
                <li>test</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>


Any ideas why it's happening?