HTML5 CSS3 Dropdown Navigation Menu | XO PIXEL

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. 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 a 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 dropdown 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’s 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!
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. Next, we’re going to style the unordered
list elements. We’re going to remove the default underline on anchors using using list-style-type:
none. We’re also going to reset themargin and padding by setting their value to 0. We’ll
be setting the overflow property tohidden and setting the background-color of the menu
to #1ebb90. 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 a element and the dropdown-btnelement. 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 textcolor 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 usingtext-decoration: none.
Next, we’re going to style the list anchor:hover, dropdown:hover and dropdown-btn by making
the hover background to a light grey and 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 it’s value to inline-block. 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-menuelement 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. 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. As always, thank you for watching. I’ll see you in next weeks video.

24 Replies to “HTML5 CSS3 Dropdown Navigation Menu | XO PIXEL”

  1. This is how i built mine:
    <meta charset="utf=8"/>
    <title> drop down menu </title>
    <link rel="stylesheet" href="new.css">

    Now you got me feeling like i am missing something now lol….Nice job

  2. For some reason it doesn't work; i even tried copy-pasting your code, both html and css and it still doesn't work.
    I'm using sublime text3 and chrome, double checking with firefox.

  3. please tell me, what's the program u're using to code ? it seems so helpfull since it shows u what u're doing at the same time that you're coding. thanks

  4. hay, can you tell me which editor you are using, I use sublime text but i like your editor so can you name it ?

  5. Thank you, but I have one main confusion that here won't we use the <nav></nav> tag and place our navigation list items in it? I have been told in the class to use the <nav></nav> list for navigation. But, is it possible to make the drop down list items while coding our list items in it instead of placing them in the <body></body> tag? Please help!

  6. Thank the lord for the pause button, lmao. Amazing video's though, you helped me so much with a school assignment

  7. your are amazing web designer I like your tutorials and I have a request to you please make a video about css animation and how make website portfolio

Leave a Reply

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