title: Responsive menu show and hide on click
body: <p>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).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;nav id="menu"&gt;
          &lt;ul&gt;
              &lt;li class="li"&gt;&lt;a href="#"&gt;WITAJ&lt;/a&gt;&lt;/li&gt;
              &lt;li class="li"&gt;&lt;a href="#"&gt;O MNIE&lt;/a&gt;&lt;/li&gt;
              &lt;li class="li"&gt;&lt;a href="#"&gt;DOŚWIADCZENIE&lt;/a&gt;&lt;/li&gt;
              &lt;li class="li"&gt;&lt;a href="#"&gt;CO ROBIĘ?&lt;/a&gt;&lt;/li&gt;
              &lt;li class="li"&gt;&lt;a href="#"&gt;KONTAKT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;MOJE PRACE&lt;/a&gt;&lt;/li
          &gt;&lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media screen and (max-width: 750px) {      
      header nav#menu ul:hover &gt; li{
          display:block !important;
      }
  
      header nav#menu ul li{
          display:none !important;
      }
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/8Wgcm.jpg" alt="enter image description here"></p>