Show and hide navigation

Show and hide navigation

I am trying to figure out how to toggle aspects on my pages. I have a navigation bar at the top of my page and when I click one of the options I want a dropdown with the different options. I have made all the html and css, just I have no idea how to toggle back and forth from everything. I have read alot of information for the last few days and cant find anything that is working or helping.

This is the default code when you load the page:
  2. <div id="main-menu-links">
  3.       <ul>
  4.             <li>
  5.                   <a href="#services" class="services-menu-toggle magnavo-menu-toggle">Services</a>
  6.             </li>
  7.             <li>
  8.                   <a href="#support" class="">Support</a>
  9.             </li>
  10.             <li>
  11.                   <a href="#community" class="community-menu-toggle magnavo-menu-toggle">Community</a>
  12.             </li>
  13.       </ul>
  14. </div>

When I click either Services or Community I would like the respected dropdowns to show up. Along with that, have the "text-selected" class correspond with which ever you clicked.

Hopefully someone can help, Thank you.