Today, I am going to write about how to create a dropdown menu item in plain HTML & CSS.
A plain HTML & CSS dropdown is fairly easy to do and can play a huge role in making your website look and function much better! I’d recommend everyone to have a dropdown on their site because it makes life a lot easier for the viewer to navigate around the website. Generally, a site with a dropdown is much preffered to visit than one without.
What are dropdowns?
Dropdowns are the bit on the main menu header where you can get to different sections/aspects of the page you want to navigate to, they make it really easy to navigate around.
Here you can see, if you wanted to access “White Label SEO” you could go to the SEO page and click on the sublink White Label SEO, but to make life easier for yourselves, we have included a dropdown with that on already so you don’t need to go all the way through to the seo page, you can just “shortcut” across it making the process much faster and making it a lot easier for you to get what your looking for.
Why do we use dropdowns?
Dropdowns are a good way to have numerous pages with different sections, this way a visitor can navigate to the section they need without having to go through numerous pages which serve no use to them whatsoever. Dropdowns are on most popular websites (eg. Facebook, eBay, Google). Dropdowns can be used in lots of different ways, they can be activated on click (which Google and Facebook use) or they can be activated when you hover over them (which eBay go for). The most popular dropdowns tend to be when you hover over them, this is because you can accidentally click on the link below when trying to access the dropdown.
Now, let’s get making our simple dropdown for you to style how you like!
HTML:
<ul>
<li><a href=”#”>Test – Dropdown</a>
<ul>
<li><a href=”#”>Test Link 1</a></li>
<li><a href=”#”>Test Link 2</a></li>
</ul>
</li>
<li><a href=”#”>Test – No Dropdown</a></li>
</ul>
Now lets talk you through this code
<ul class=”dropdown”>
This code selects the css rule “.dropdown” from your allocated css file or your style tag in your html document. The reason “dropdown” has a full-stop in front of it is because that is it’s identifier to tell the html document that it’s a class and not an id, if it was an id, it would have a hashtag in front of it. The ul tag in html is called an unordered list, there is also ol which means ordered list. There isn’t really much difference between the two, but the reason we use ul in navigation bars is because that means that the order isn’t important in this, if you’d preffer to use the ordered list then go ahead but make sure you change it in your css file too!
<li><a href=”#”>Test – Dropdown</a>
<ul>
<li><a href=”#”>Test Link 1</a></li>
<li><a href=”#”>Test Link 2</a></li>
</ul>
</li>
Be careful to read this clearly because it’s quite confusing as this is the actual dropdown.
This whole script is your actual dropdown. Now, let’s explain it; The li tag means list, this is due to the fact we are using an unordered (or ordered depending on the last step) list to do the navigation bar this is all styled in css which we will get onto later in this tutorial. The a href tag is the link, this is called an anchor this tells the browser that it’s linking to somewhere else, I have placed a hashtag in there to tell the browser not to link anywhere but to display the text as a link. There is then another unordered list tag, this is the start for the dropdown, again this will be styled in css later and will not display unless you hover over the initial li tag. Again, there is another li tag inside the ul tag, this is the background and styling for the dropdown, this will also be styled in css later. There is then another anchor tag, this is the link for the contents of the dropdown.
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
padding: 5px 15px 5px 15px;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
CSS Code explained:
ul {
margin: 0;
padding: 0;
list-style: none;
}
This identifies the ul tag from earlier, the margin:0 and the padding:0 make sure there is no unused space around where it will be and if there is, it deletes it. Now, because we’re using unordered list and the list tag, we need to make sure it removes the bullet point which it uses for lists, to do this we set the list-style as none that way we won’t have any ugly bullet points in our navigation bar, and it gets spaced out correct and looks much better.
ul li {
display: block;
float: left;
}
This is why we use ul and li tags, they’re easy to style to make them look exactly as you want them, for this simple example we are just going to have the main functions in them which are these two. The reason we are floating it left is so that it displays inline, you may be wondering why we could not just use the display:inline tag, but this is because we have more than one ul li and we have to display them as a block for the second one (the dropdown) to work properly.
li ul {
display: none;
}
The reason we display this as none as soon as the page loads is because we don’t want the dropdown to show up until we hover over it.
ul li a {
display: block;
text-decoration: none;
padding: 5px 15px 5px 15px;
}
The display block, in this instance is to help with spacing out the dropdown, we don’t want them to be too close together so that they over-lap. Text-decoration is to remove the horrible under-line you get with using anchors, If you link the underline then just remove this line or change “none” to “underline” and it will add your underline back. We add a padding to help space out the text and to help when you hover over the li it shows the link rather than when you just hover over the text.
li:hover ul {
display: block;
position: absolute;
}
This is the actual dropdown and the display block is to override the display none that we set when the page loads, so now when you hover over the initial li, it will then initiate the display block so that will delete the display none so now it shows up. And the position absolute is so that it will display in the position that you want it to so then when you move your mouse down, over the dropdown it will not disappear before you have chance to click on anything.
li:hover li {
float: none;
font-size: 11px;
}
This is the second list where each dropdown is shown up we have to float left again so it will now show below each other and not inline like the one before, and we must make the text smaller than the top text.
We now have our very own dropdown and it functions properly but if you wanted to add some styling to it to make it look nice, you can! It’s really flexible in what you can do with them.
Here is the example on our website:
