title: CSS/HTML - Hamburger menu with CSS
body: <p>For my HTML/CSS class I got assigned to make a webpage, and make it responsive. One of the conditions is we have to make a hamburger style menu when the screen size is on mobile screen size. </p>
  
  <p>Well, I figured out everything except how I'd go to make the menu dropdown the menu items on click (probably not possible with just css, so :active or :hover will do). We are not allowed to use any JavaScript..</p>
  
  <p>I would like to know how to change the list display property to block when the IMG is hovered/active.</p>
  
  <p>Relevant HTML part:</p>
  
  <pre><code>    &lt;div class="nav"&gt;
      &lt;img id="hamburger" src="img/hamburger.png" alt="menu"/&gt;
      &lt;ul class="clearfix"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sample&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Ipsum&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Last&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;!-- Einde menu items --&gt;
      &lt;/div&gt;&lt;!-- Einde nav --&gt;
  </code></pre>
  
  <p>The CSS for mobile screens:</p>
  
  <pre><code>@media screen and (max-width: 500px) {
  
  .mobile-collapse {
      width: auto;
      float: none;
  }
  .hide-mobile {
      display: none;
  }
  .nav {
      padding-left: 0%;
  }
  .nav ul li {
      display: none;
  }
  .nav img {
      display: block;
      height: 50px;
  }
  }
  </code></pre>
  
  <p>So to sum it up, I'd like to know how I can change <code>.nav ul li</code> to <code>display:block</code> when <code>.nav img</code> is hovered..</p>