我想为移动视图制作菜单，而在移动设备上不使用鼠标悬停菜单，如果用户触摸或单击该菜单，我需要展开子菜单。
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>
这是我的 CSS 示例，我需要将“悬停”更改为“单击”以进行移动视图。
#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 {
}
示例：http: //jsfiddle.net/mVBXM/