Building the drop-down menu

Let's create a pure CSS drop-down menu! We'll start by adding the markup and follow it up by adding the CSS.

Creating the basic HTML list

Typically, when building a component such as a drop-down menu that's usually hidden from view, I build it as if it were not hidden. Then, once it's complete and fully styled, I create the drop-down behavior. That's what we'll do here as well. So let's create the HTML within our existing index.html document. We'll go to the unordered list of our nav bar, as shown here:

<nav class="grouping">
    <figure>
        <img src="images/sharky.png" alt="Shark">
    </figure>
    <ul class="primary-nav grouping">
        <li><a href="#">Home</a></li> 
        <li><a href="shark-movies.html">Movies</a></li>
        <li><a href="#">Species</a></li>
        <li><a href="#">Chum</a></li>
    </ul>
</nav>

It...