title: Convert CSS hover menu to click for responsive design
body: <p>I want to make menu for mobile view, while on mobile is not using mouse to hover the menu, I need the child menu spread if user touch or click that menu.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="cssmenubox"&gt;
  &lt;ul id="cssmenu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Single&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Story&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Monotone&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Post&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Quotes&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>Here the example of my CSS, and I need to change the "hover" to "click" for mobile view.</p>
  
  <pre><code>#cssmenubox { width: auto; height:auto; }
  ul#cssmenu {
  list-style: none !important;
  margin: auto;
  padding: 0;
  width: 100%;
  height: 75px;
  display: block;
  background-color: #fff !important;
  }
  ul#cssmenu ul { 
  display: block; 
  }
  ul#cssmenu li {
  font-size: 32px;
  margin: auto;
  list-style: none !important;
  height: 75px;
  display: block;
  width:100%;
  display:block;
  }
  ul#cssmenu li:first-child {
  }
  
  ul#cssmenu a {
  display: block;
  text-decoration: none;
  font-weight:normal;
  height: 75px;
  color: #000;
  }
  ul#cssmenu a:hover {
  color: #0090D3;
  height: 75px;
  }
  ul#cssmenu li &gt; ul { display:none; }
  ul#cssmenu li:hover ul { 
  display: block;
  font-size: 14px;
  }
  ul#cssmenu li:hover ul li {
  display:block;
  width:auto;
  height:auto;
  }
  ul#cssmenu li &gt; ul &gt; li { 
  display:block;
  }
  ul#cssmenu li &gt; ul &gt; li {
  background-color:#fff;
  z-index:2;
  position:relative;
  height:75px;
  }
  ul#cssmenu li:first-child {
  }​
  </code></pre>
  
  <p>Sample:
  <a href="http://jsfiddle.net/mVBXM/" rel="nofollow">http://jsfiddle.net/mVBXM/</a></p>