Convert CSS hover menu to click for responsive design

Question

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.

HTML:

<div id="cssmenubox">
<ul id="cssmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#">Single</a></li>
<li><a href="#">Story</a></li>
<li><a href="#">Monotone</a></li>
</ul>
</li>
<li><a href="#">Post</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Quotes</a></li>
</ul></li>
<li><a href="#">About</a></li>
</ul>
</div>​

Here the example of my CSS, and I need to change the "hover" to "click" for mobile view.

#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 > 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 > ul > li { 
display:block;
}
ul#cssmenu li > ul > li {
background-color:#fff;
z-index:2;
position:relative;
height:75px;
}
ul#cssmenu li:first-child {
}​

Sample: http://jsfiddle.net/mVBXM/

Answer 1

Why don't you try media queries? Use

@media only screen and (max-width: 480px) {
     /* Your CSS code comes here */
}

Make sure you override all the properties that you do not want in mobile view. That way, the CSS for desktop view will not affect mobile view.

As far as I know there is no click pseudo class available in CSS. So you need to use Javascript to do that. Check this link for more details.

http://www.w3.org/TR/CSS2/selector.html