Lab 15 Dropdown

      In this lab, we add new features into our navigation bars, text, and images to make it more interesting. After we have learned how to create a navigation bar, it's time to move farther, so we learn to make dropdown contents. Our task in this lab is to create  a dropdown navigation bar, text, and images. This can be done through the use of CSS with all those dropdown classes. For the navigation bar, we need to use a button class called dropbtn. For the dropdown text, it's just the the same divisions and classes. And for the image, we need to create a desc class there will be text or labels under the dropdown content.

     First, we need to create a dropdown class, then adjust the dropdown contents and other dropdown classes in CSS to the way you desire, so when the mouse is hovered on that element, it will dropdown something that we design it to show. For the dropdown navigation bar, I used the same navigation bar I created in lab 14, and I made a dropdown button using the dropbtn and created a other button, and the contents are the two links to my blog and my teacher's website which will appear when you hover on the button. For the dropdown text, I simply just put Hi! as the dropdown content using span. For the dropdown image, I used a image of flower I took at the amazing Gantry Plaza State Park, and the dropdown content for this is larger version of the image with a short explanation at the bottom using the desc class.