Dropdown menu which will respond on click another content

I have this dropdown menu solution. http://ift.tt/2gD17o6

I need to hide the one dropdown menu that is displayed when I click on a different line and show dropdown menu of it. I also need the first line dropdown menu to be displayed always when people go to the website.

I hope I correctly described my problem, can you please help me?

<div class="container">
<ul>
<li class="dropdown">
  <a href="#" data-toggle="dropdown">First Menu</a>
  <ul class="dropdown-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</li>
<li class="dropdown">
  <a href="#" data-toggle="dropdown">Second Menu</a>
  <ul class="dropdown-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</li>
<li class="dropdown">
  <a href="#" data-toggle="dropdown">Third Menu </a>
  <ul class="dropdown-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</li>