One of many remaining CSS challenges for me is coding a horizontal navigation menu that displays a drop down menu either via mouse pointer hover or click. I’ve looked at the code for a couple of these and I have to say, based on my current skill level, this isn’t going to be easy.
I decided to start with the “easiest” example I could find, and that was the one at W3Schools. I’ll use their code as a basis, and then show my code as a way to simplify it even more. I’m hoping by the end my explanations will be make it super easy for even a novice to understand, which should help me since that is my skill level also.
Note, the W3Schools CSS code is in 7 parts, I will display their example code in orange and my code in blue. Also, it would be helpful to your understanding of all of this if you have a good grounding in the ‘display: block’, ‘:hover’ and ‘position:.’
Part 1:
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
Above is the code for the ‘button” the user will see. All this is pretty straightforward: text style, background color, pointer.
.menu-button {
background-color:black;
color: #fff;
padding: 10px;
font-size: 1em;
text-align: center;
cursor: pointer;
My styling is different, but the principles are all the same. Nothing really big here, this is the easy part.
PART 2:
/* The container <div> – needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
At first I thought the “display: inline-block” was only needed if you were putting a bunch of these menu blocks together on a horizontal row, however I was dead wrong. In the HTML you’ll attach this CSS to a div, and we know by now that a div is block element. I noticed that when I removed the ‘display:inline-block’ from the CSS as my pointer hovered from off the button over to the right horizontally the drop down menu still displayed. That is surely a bug, when the cursor is not on the button the drop down menu should not appear!
My only guess as to why was that in the HTML the ‘div was being a div’ and therefore it’s block property (of extending the entire width of the available space) was in action. To prove it I coded a border on the div and sure enough I was right, I could see that it was extending the width of the page. To fix it I could either reinstate the ‘display: inline-block’ property or set a specific matching width: ‘width: 100px.’ Both shorten the div, so either way would work.
Again, at first I couldn’t really tell what the ‘position: relative’ tag does here, when I excluded it from the code it seemed like it had no effect. However I have discovered the relative position is really, really critically important! In Part 3 you’ll have an element with a ‘position: absolute,’ so you’ll need to declare the ‘position: relative’ here to compliment it. I explained here the relationship between relative and absolute positioning – please read it so that it will make sense!
.container {
font-family:impact;
display:inline-block; /* or width: 100px; */
position:relative;
If I declare a font-family here it be inherited by all the elements in the menu.
PART 3:
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
To reduce the amount of code you don’t need the box-shadow, it’s just decoration. Background color and width are all self-explanatory. What is really important in this code is the ‘display: none’ tag. This set of code essentially designates the format of the drop down menu, while also hiding it. It makes sense – because it has to stay hidden until the user performs an action to make it visible. Test for yourself, if you exclude the “display:none” tag the menu will always display ‘dropped down.’
The last tag, ‘position: absolute;’ was a tag I was at first very confused about. At first I thought I didn’t need it, when I removed it everything appeared to work just fine. However I had to realize I was writing this menu in a vacuum – in a real page this would be part of a horizontal navigational menu at the top of the page with text below. What you don’t want to happen is when you hover over your nav menu for the drop down menu to appear and push the text and everything else below the nav menu down on the page. You want your drop down menu to appear, or float, on top of the page’s content. This is why the ‘position: absolute’ tag is necessary to the code.
.menu-content {
display: none;
width: 100px;
background-color: pink;
position: absolute;
Part 4:
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
This is the code for hyperlinks in the menu (the menu options), it should be pretty easy to understand. The color of the hyperlinks are declared, no text decoration (to get rid of the underline) and padding values are also designated. Note that there is no font family assigned, that is why the assigned font family in Part 2 carries through in my code. The ‘display: block’ tag is very, very important. It formats the hyperlink into ‘blocks,’ so that they arrange themselves one under each other – into a column of drop down menu options. Without this tag the hyperlinks (menu options) will display inline and it will look like a hot mess! Check out my post here explaining more details about block, inline-block and inline.
.menu-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
padding: 3px;
My code is essentially the same at this step, I only added a center tag because I wanted to see my hyperlinks (menu options) in the middle.
Part 5:
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
.menu-content a:hover {background-color:lightgreen;}
This is simple, this is just saying when the drop down menu is visible the mouse pointer will change the background color of the menu option when the the pointer is hovering over it.
Part 6:
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
.container:hover .menu-content {
display:block;
What this code is saying is when the div entitled “container” has the mouse ‘hovering’ over it display in block format the div named “menu-content.” Remember in Part 3 that “menu-content” is designated as “display: none.” Therefore this code is the mechanism that triggers the menu-content to be visible, that trigger being the mouse pointer hovering over the div named “container.” You’ll see later in the HTML that the “menu-content” div contains all the menu hyperlinks.
Part 7
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
.container:hover .menu-button {
background-color:gray;
This last step designates the background color of the menu button when you hover over either the menu button or the drop down menu with the mouse pointer. You can see it in the code, when the pointer is hovering over the ‘container’ (which holds the menu button and the drop down menu), the menu button’s background color should change to gray.
OK, Wow! That is a lot. This is super complicated, more complicated than I thought when I first began to write this post. I have to saying writing this out has helped me to understand how this all works even more. I’m hoping when I get to coding it and adding it to my website that I will become even more fluent in the intricacies of drop down menus.
Give me some time to recoup! Part 2 coming soon!