Drop-down menus can make navigating your website easier. I added a drop-down menu to my personal website.
In order to give you a cleaner version of the drop-down menu, we will examine the clean example on my website by first looking at the HTML and then look at the CSS.
The HTML is very simple. Let’s start there. Open a new notepad document and follow me.
You’ll see that the CSS is a little more complicated. Let’s copy and paste the CSS into a new notepad document.
- We will break down the major components of the CSS file to understand what’s going on.
- We will use our book’s Appendix section to learn more about the CSS once we’ve typed it in and done the example ourselves.
- We will play around with the CSS code by deleting and altering rules in order to see what happens. –> This is a great way to learn what specific rules are doing in CSS!
- If you need to use drop-down navigation, you will add the code to your website and adapt it as necessary. I will help you, if needed.
Also, don’t forget that I’ve added a new section of HTML & CSS Resources in our sidebar of links on our blog here.
Appendix Top 7
Appendix #1: More CSS selectors (and the word-spacing property)
Appendix #2: Vendor (i.e., browser) specific CSS properties
Appendix #3: CSS transforms and transitions (we will do this example together)
Appendix #5: HTML5 APIs and web apps
Appendix #6: More on Web fonts
Appendix #7: Tools for creating web pages