I chose to create a dropdown menu using CSS. The menu should have a list of links that appear when you hover over the parent div. You can make the menu have as many links as you like. When you hover over each option, the background color should change as an indicator of which link you are about to click.
HTML
Make a parent div to hold everything- the main button and all the links that will appear when you hover over it. Mine is called “dropdown”.
Inside that div, make a button that will contain all of the links. Mine is called “menu”.
Also inside the parent div, but not inside the button, make a div that is the parent of all links that appear when you hover over the button. Mine is called “dropdown-content”.
Inside this div, create as many links to other pages as you want using .
Close all divs by using two
tags. This is all of the HTML needed.
CSS
Start your CSS with an id for your button. In this case, mine would be #menu. Use an id because it is unique. This is the only element that is visible at all times. Style it with background colors, changes to the text, and any other changes you like. How the button looks does not impact the functionality of the dropdown menu.
Next in your css, make a class for the div that holds all of your links. Mine is .dropdown.content. Add display:none to hide all of this until you hover over it. Add a width and background color.
Add .dropdown-content a. Adding “a” means these declarations will only affect links. Style the links however you want, but be sure to add display:block. Adding text-decoration:none stops the links from having an underline or color change when clicked.
Next, add the rule .dropdown-content a:hover. This will only make changes to the content when you hover over it. You can add a color change here so that each link’s background changes when you hover.
The final rule will be dropdown:hover .dropdown-content. Add the declaration display:block. Without this, the dropdown menu does not appear on hover.