title: Changing CSS onhover to onclick
body: <p>I'm using the following CSS:</p>
  
  <pre><code>.main-navigation {
      clear: both;
      display: block;
      float: left;
      width: 100%;
  }
  .main-navigation ul {
      list-style: none;
      margin: 0;
      padding-left: 0;
  }
  .main-navigation li {
      float: left;
      position: relative;
  }
  .main-navigation a {
      display: block;
      text-decoration: none;
  }
  .main-navigation ul ul {
      -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
      box-shadow: 0 3px 3px rgba(0,0,0,0.2);
      display: none;
      float: left;
      position: absolute;
      top: 1.5em;
      left: 0;
      z-index: 99999;
  }
  .main-navigation ul ul ul {
      left: 100%;
      top: 0;
  }
  .main-navigation ul ul a {
      width: 200px;
  }
  .main-navigation ul ul li {
  }
  .main-navigation li:hover &gt; a {
  }
  .main-navigation ul ul :hover &gt; a {
  }
  .main-navigation ul ul a:hover {
  }
  .main-navigation ul li:hover &gt; ul {
      display: block;
  }
  .main-navigation li.current_page_item a,
  .main-navigation li.current-menu-item a {
  }
  
  /* Small menu */
  .menu-toggle {
      cursor: pointer;
  }
  .main-small-navigation .menu {
      display: none;
  }
  </code></pre>
  
  <p>to control a list-based, multi-level, navigation system, the HTML for which which looks something like this: <a href="https://gist.github.com/2851105" rel="nofollow">https://gist.github.com/2851105</a>.</p>
  
  <p>What I'd like to know is, how can I change the hover event that makes the menu appear into a click event? Can this even be done in CSS alone, or so I need to introduce some javascript?</p>
  
  <p>Thank you.</p>