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's best practice to build menus inside of an unordered list, where each menu ...
