How do i get my navigation bar to show all tabs but only get the selected tab highlighted?

How do i get my navigation bar to show all tabs but only get the selected tab highlighted?
0

#1

0
down vote
favorite
I need all dropdown lists on my navigation bar to show when one is clicked or hovered. This action is kind of like the Uark website when it is hovered. Here is the url http://www.uark.edu/. But the catch is I only need the tab that you selected to be highlighted while all of the other tabs are not highlighted but there lists show. Again, this is similar to the hover action on the http://www.uark.edu/.

      <div class="navbar navbar-default" role="navigation" id="bottomNav">
       <div class="container-fluid">
     <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>                        
      </button>
       </div>

 <div class="collapse navbar-collapse" id="myNavbar">
 <ul class="nav navbar-nav">


    <!--Mobile Mode-->
    <div class="row hidden-sm hidden-md hidden-lg hidden-xl">
      <div class="col-xs-4 img-responsive hidden-sm hidden-md hidden-lg hidden-xl text-center" id="visitUs">
        <a href="form.html">
          <img class="collapseSize" src="" alt="eeee"
            title="hell world">
          <span class="iconText">what are you talking about</span></a>
      </div>



      <div class="col-xs-4 img-responsive hidden-sm hidden-md hidden-lg hidden-xl " id="callNow" data-toggle="dropdown">
        <a href="eeeeee">
          <img class="collapseSize" src="#" alt="oops"
            title="17 hundred">
          <span class="iconText">oosh</span>
          <span class="iconText">have</span>
        </a>
      </div>

      <div class="col-xs-4 img-responsive hidden-sm hidden-md hidden-lg hidden-xl" id="applyNow">
        <a href="#">
          <img class="collapseSize" src="#" alt="#"
            title="#">
          <span class="iconText">10</span></a>
      </div>

    </div>

    <!--Horizontal line appears in collapsed mode-->
    <hr class="hidden-sm hidden-md hidden-lg hidden-xl">

      <li class="dropdown" id="dropdown-list1">
    <a class="dropdown-toggle menu-text" id="list1" data-toggle="dropdown" href="#">random</a>
    <ul class="dropdown-menu">
      <li><a class="dropdownText"  href="#">tomatoes</a></li>

      <li><a class="dropdownText" href="#">onions</a></li>

      <li><a class="dropdownText" href="#">fish</a></li>



    </ul>
  </li>

   <!--Horizontal line appears in collapsed mode-->
    <hr class="hidden-sm hidden-md hidden-lg hidden-xl">

      <li class="dropdown" id="dropdown-list2">
    <a class="dropdown-toggle menu-text" id="list2" data-toggle="dropdown" href="#">office</a>
    <ul class="dropdown-menu">
      <li><a class="dropdownText" href="#">ofofofofofo</a></li>

      <li><a class="dropdownText" href="#">card board</a></li>

      <li><a class="dropdownText" href="#">paper</a></li>

    </ul>
  </li>

    <!--Horizontal line appears in collapsed mode-->
    <hr class="hidden-sm hidden-md hidden-lg hidden-xl">

  <li class="dropdown" id="dropdown-list3">
    <a class="dropdown-toggle menu-text" id="list3" data-toggle="dropdown" href="#">cars</a>
    <ul class="dropdown-menu">
      <li><a class="dropdownText" href="#">jeep</a></li>

      <li><a class="dropdownText" href="#">tesla</a></li>

      <li><a class="dropdownText" href="#">farari</a></li>

    </ul>
  </li>

     <!--Horizontal line appears in collapsed mode-->
    <hr class="hidden-sm hidden-md hidden-lg hidden-xl">

  <li class="dropdown" id="dropdown-list4">
    <a class="dropdown-toggle menu-text" id="list4" data-toggle="dropdown" href="#">vegatables</a>
    <ul class="dropdown-menu">
      <li><a class="dropdownText" href="#">spinach</a></li>

      <li><a class="dropdownText" href="#">squash</a></li>

      <li><a class="dropdownText" href="#">oranges</a></li>

      <li><a class="dropdownText" href="#">watermelon</a></li>

    </ul>
  </li>

    <!--Horizontal line appears in collapsed mode-->
    <hr class="hidden-sm hidden-md hidden-lg hidden-xl">

  <li class="dropdown" id="dropdown-list5">
    <a class="dropdown-toggle menu-text" id="list5" data-toggle="dropdown" href="#">underground</a>
    <ul class="dropdown-menu">
      <li><a class="dropdownText" href="#">level 1</a></li>

      <li><a class="dropdownText" href="#">level 2</a></li>

    </ul>
  </li>
</ul>