モバイルビュー用のメニューを作成したいのですが、モバイルではマウスを使用してメニューをホバーしていませんが、ユーザーがそのメニューをタッチまたはクリックすると、子メニューが広がる必要があります。
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 {
}