CSS/HTML - Hamburger menu with CSS

Question

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.

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..

I would like to know how to change the list display property to block when the IMG is hovered/active.

Relevant HTML part:

    <div class="nav">
    <img id="hamburger" src="img/hamburger.png" alt="menu"/>
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Last</a></li>
    </ul><!-- Einde menu items -->
    </div><!-- Einde nav -->

The CSS for mobile screens:

@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;
}
}

So to sum it up, I'd like to know how I can change .nav ul li to display:block when .nav img is hovered..

Answer 1

I'd like to know how I can change .nav ul li to display:block when .nav img is hovered

You should use the sibling selector, a tilde which is ~ .

Your code should be...

.nav img:hover ~ ul li {
  display: block;
}

Try that. A good explanation of the tilde in CSS.

Answer 2

You can either use the tilde ( ~ ) or the plus ( + ) css operators.

The tilde operator is called the general sibling selector

.nav img:hover ~ ul li {
  display: block;
}

The plus operator is called the adjacent sibling selector

.nav img:hover + ul li {
  display: block;
}