I trying to write a responsive menu. It's actually works but I can't get the on clik effect in CSS. For this moment I'm using a hover. How to make that when the screen width is lower than 750px I have to click on menu from pic. number 2 (ul) to show menu from pic. number 3 (li) ? This is a one page site so when I clik on some element from drop down menu it's should hide menu agin (li).
HTML:
<header>
<nav id="menu">
<ul>
<li class="li"><a href="#">WITAJ</a></li>
<li class="li"><a href="#">O MNIE</a></li>
<li class="li"><a href="#">DO?WIADCZENIE</a></li>
<li class="li"><a href="#">CO ROBI??</a></li>
<li class="li"><a href="#">KONTAKT</a></li>
<li><a href="#">MOJE PRACE</a></li
></ul>
</nav>
</header>
CSS:
@media screen and (max-width: 750px) {
header nav#menu ul:hover > li{
display:block !important;
}
header nav#menu ul li{
display:none !important;
}
}
See Question&Answers more detail:os