Showing and Hiding menu with pure CSS

We used to code showing and hiding menu/navigation with Javascript.

<div>
    <a href="#hide" id="hide">≡ Navigation</a>
    <a href="#show" id="show">x Navigation</a>
    <ul id="list">
        <li>Products</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>
</div>

With pure CSS

#hide,#show,#list {
    display:block;
}

#list,#show,#hide:target {
     display: none;
}

#hide:target + #show,
#hide:target ~ #list {
    display:block;
}