Dropdown Menu Tutorial HTML5 CSS3

Hey, Pixels! This week you’ll be learning how to create a dropdown menu with HTML5 and CSS3. Take a look at the HTML5 CSS3 Dropdown Menu Tutorial video below. Be sure to take a look at the source files to see how it’s made.

Source Files

See the Pen Dropdown Menu Navbar by Marisa (@xopixel) on CodePen.

Coding the HTML5

First, we’re going to code the HTML5. Let’s start with the unordered list tag. Within the unordered list tag, we’re going to add three individual links on the menu using the list tag and within the list tag, we’re going to add the anchor tag since it’s going to be used as a link to other parts of our hypothetical website. For now, we don’t have an URL to point the anchor, so we’re just going to put the hashtag as a link placeholder.

Once we’ve written all of our menu links, we’re going to write a few lines of code for the the drop-down menu. First, create another list with the class dropdown. Within the link, we’re going to add an anchor tag with the class dropdown-btn. Let’s label it Dropdown so we know which link will lead to the actual dropdown menu.

Now, we’re going to create a div and give it the class dropdown menu. Within this div, we’re going to put four anchor tags. For this tutorial, I’m just going to give them descriptive names like link 1, link 2, etc. That’s it for the HTML5. That was super easy! Double check your code and make sure your opening tags have their respective closing tags and that there are no missing brackets. Be sure to check out my video 10 HTML coding mistakes if you’re having trouble with your HTML code. Now, you’re ready to move on to the CSS!

Coding the CSS3

So, we’ve coded all of the HTML and now we’re on the last step which is coding the CSS. Let’s get started! First, we’re going to select the body tag and some basic styles, like, font for the page, width of the page. We’re also going to add 20px of padding around the perimeter of the website.

Unordered List Styles

Next, we’re going to style the unordered list elements. We’re going to remove the default underline on anchors using list-style-type: none. We’re also going to reset the margin and padding by setting their value to 0. We’ll be setting the overflow property to hidden and setting the background-color of the menu to #1ebb90.

List Styles

Now we’re going to focus on the list elements. First, we’re going to float the list items to the left. Then, we’re going to select both the li an element and the dropdown-btn element. Selecting more than one elements saves time if you’re applying the same styles to more than one element. Now, we’re going to display them inline-block, change the text color to #fff, align their text to the center, add 18 px of padding to the top and bottom and 22 pixels of padding to the left and right and remove the default link underline using text-decoration: none.

Next, we’re going to style the list anchor: hover, dropdown: gray hover and dropdown-btn by making the hover background to a light gray changing the text to the same green we used for the menu. Let’s style the list elements in the dropdown by using the display property and setting its value to inline-block.

Dropdown Menu Styles

Finally, we’re going to style the star of this tutorial, which is the actual dropdown part for this dropdown menu tutorial. To do this, we’re going to select the dropdown-menu element and style it by setting it to display: none. This is to initially hide the dropdown menu. Now we’re going set its position: absolute so it’s positioned right below the parent anchor link. We’ll give it a light grey background color, set it’s width to 160 pixels and add a drop shadow to the menu using the box-shadow property.

Now we’re going to style the dropdown menu’s anchors by styling the color of the font grey, adding 12 pixels of padding to the top and bottom and 16 pixels of padding to the left right. We’ll also set text decoration: none, set the display: block, and set text-align: left. We’re going to style the anchors when the mouse hovers over them using the :hover pseudo class and changing their background color to green and the the text color to white.

Lastly, we’re going to select the dropdown element and add the pseudo class :hover to it. We’ll also select the dropdown-menu element, use the property display: block. That way, we only see the dropdown menu items when the mouse hovers over the button.

Conclusion

There you have it! You created your very own drop-down menu. Now go ahead and use what you learned in this tutorial on your other coding and web design projects. Feel free to share this video with anyone that’s interested in learning how to code. Give this video a big thumbs up and subscribe to XO PIXEL for more great videos just like this one.

Now it’s your turn!

I would love to see what you’ve made with the help of this tutorial. Feel free to comment and post your pictures in the comments section below!

Marisa Blair is a front-end web developer and graphic designer based in Toronto. When she's not writing for her blog xopixel.com, she's making design & tech videos for her YouTube channel.

4 Comments

  1. Hi marisa … Awesome and easy to learn dropdown … Could you please help with doing a dropdown in a dropdown … Please thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

More On XO PIXEL