title: How can I create a submenu with CSS navigation?
body: <p>I want to create a CSS navigation with submenus that appear when the heading tab is clicked. Here's example HTML of how I'd like to see it work:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
  &lt;li id="nav-1"&gt;&lt;a href="home.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="nav-2"&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;
  &lt;ul id="subnav-2"&gt;
    &lt;li&gt;&lt;a href="page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="page2"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="page3"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="nav-3"&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
  &lt;ul id="subnav-3"&gt;
    &lt;li&gt;&lt;a href="page1"&gt;page 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="page2"&gt;page 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="page3"&gt;page 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
    &lt;li id="nav-4"&gt;&lt;a href="crickets.php"&gt;Other tab without submenu&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I can't seem to find anything online to make this work. Any ideas?</p>