title: How can I build a dynamic menu using CSS and JavaScript?
body: <p>I'm building a website for my tennis club and I've been looking various club websites for some inspiration.</p>
  
  <p>I've read about some solutions before to my problem but never gotten specific advise from a webmasters forum.</p>
  
  <p>How can I achieve something like:</p>
  
  <p>Menu: </p>
  
  
  
  <pre class="lang-none prettyprint-override"><code>       - Home
         - About the Club
  </code></pre>
  
  <p>And then say a user clicks on 'About the Club' the menu then looks like below:</p>
  
  <pre class="lang-none prettyprint-override"><code>       - Home
         - About the Club
              Members
              Prices
              Tournaments
  </code></pre>
  
  <p>I hope that's clear enough if not I can provide an image to further explain my required result. </p>
  
  <p>P.s. I swear this is achievable using just CSS and JavaScript (perhaps a framework like JQuery) just can't specifically nail down a solution. Can't use PHP as its going on a server with no PHP/MySQL support.</p>