Nav that must be clicked to activate

nav-click.htm

<nav class="container navbar navbar-default">
      <!-- Non-collapsing part of nav -->
      <div class="navbar-header">
        <!-- Button that toggles collapsing part of nav bar -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#site-nav">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- Brand navigation (links to home page) -->
        <a class="navbar-brand" href="index.html" title="Home">Colors</a>
      </div>

      <!-- Collapsing part of nav -->
      <div class="collapse navbar-collapse" id="site-nav">
        <!-- Core content nav -->
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Red</a></li>
              <li><a href="#">Blue</a></li>
              <li><a href="#">Yellow</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Secondary <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Green</a></li>
              <li><a href="#">Purple</a></li>
              <li><a href="#">Orange</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tertiary <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Amber</a></li>
              <li><a href="#">Violet</a></li>
              <li><a href="#">Magenta</a></li>
            </ul>
          </li>
        </ul>
        <!-- Utility Nav -->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Search</a></li>
        </ul>
      </div> <!-- End collapsing nav -->
    </nav>