title: css hover to onclick conversation
body: <p>I was wondering if anyone could help me out. I'm trying to make a simple folio site, and I have this link in the top nav that when clicked on would appear a horizontal menu underneath the header. So far I have goten it to work with just css, but I don't like how the menu appears when hovered, it would look much more professional if it appeared when clicked and stayed there until you click on the same link again. if anyone could help me that'll be great. I've tried all sorts of java tutorials and won't very successful I didn't fully understand it.</p>
  
  <pre><code>&lt;header&gt;
      &lt;a class="home" href="../index.htm" title="Home Page"&gt;&lt;/a&gt;
      &lt;a class="to_nav" href="#nav" &gt;&lt;/a&gt;
      &lt;div class="logo"&gt;
          &lt;a href="#top"&gt;
              &lt;h1&gt;Deeran&lt;/h1&gt;
              &lt;span&gt;Graphic Design&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;nav&gt;
          &lt;ul class="drop"&gt;
              &lt;li&gt;
                  &lt;a id="menu"&gt;&lt;/a&gt;
                  &lt;ul class="hide"&gt;
                      &lt;li&gt;&lt;a href="#folio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact"&gt;Contact/Hire&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>And here's the css</p>
  
  <pre><code>nav {margin: 0; padding: 0;}
  nav ul li a#menu {
      display: block;
      width: 67px;
      height: 50px;
      position: absolute;
      right: 0px;
      top: 0px;
      margin-top: 9px;
      margin-right: 15px;
      margin-bottom: 0px;
      margin-left: 15px;
  }
  
  nav ul ul.hide {
      display: none;
      list-style: none;
      margin: 10px 0 0;
      text-indent: none;
      clear: both;
      width: 100%;
      position: absolute;
      left: 0px;
  }
  
  nav ul ul.hide li {margin: 0;}
  nav ul li:hover &gt; ul {
      display: block;
      list-style-type: none;
      }
  </code></pre>
  
  <p>if there was one simple way to convert that one :hover function to onClick I would be very grateful :)</p>