How to create a simple dropdown navigation menu button HTML CSS

Hello you, are you ready for the trickiest bit of web-design we're going to do so far? It's a Drop Down menu, seems easy, and it is easy. Step by step, real easy, all together kind of a, that's that thing. A little bit of CSS that we need to make it work, but we'll do it step by step, together. Not as scary as I am threatening, that's what I'm doing. I need to be a little bit nonchalant about this so that, "Yeah, no, it's fine, it's easy, let's just do it real quick", and then you look at the length of the video, and you're like, "That's 20 minutes." Is it 20 minutes? Probably about that now, but anyway, Drop Down menu in a navigation, all by itself, that's why we're doing it over here, so that we could just look at in it's pure self, and you can keep it separate, then we'll fold it into the actual website we're building in the very next video. All right, let's get started.
 
We're going to do this one in isolation first, and then in the next video we'll integrate it into our Roar Bikes video, website, sorry. So close down the website, and let's make a brand new one. So we can go 'File', 'New', we're going to create two files. One's going to be HTML, and one's going to be CSS. We'll keep this separate, it would be handy for you to keep for yourself as well, is that you've got a working Drop Down menu all by yourself. So let's save it, and let's call this one 'Drop Down CSS Menu'. 

There's lots of ways of doing menus. We're doing it in CSS because it's something, some of the skills we already know. We'll show you how to do it later on using jQuery, but this one's a really good, easy, well, easy-ish, easy to understand. And this is going to be .html. I'm going to make a second document, it's going to be the CSS of the same name. Actually I'm going to call you-- give it the same name to keep it clear. Connect the two, so in here, exclamation mark, return. Up here, under Title, I'm going to say Style, no, we're going to say 'Link'. We'll link the CSS. We're going to call ours something else, not Style, we're going to call it-- it's kind of doing some weird stuff, that's all right. I want Drop down menu, css; nice. 

So I've connected these two, drag the tab over to the side. So I can see them side by side. In our HTML, let's first put in our crazy Nav-- crazy returns. Let's put in a Nav, just the Nav container to put it all inside. We're not going to do it in super isolation, just a little isolation. Now in the last video what we did is we put an A-tag in, and then we gave it a Class name called My Button, and we styled it to look like a button. We're going to do something similar here. We're going to, instead of making an A-tag, and kind of like, faking a box around it, we're actually going to do a Div tag, and color it in, and put the A-tag inside of it. I'll show you what I mean. 

It will just make our Drop Down menu a chunk easier. So we're going to make a Div tag, and we're going to call this one Nav Button, and inside of that Div tag we're going to create an A-tag. It's going to go to nowhere, hash, '#', and this one is going to be called Home. So we're putting the A-tag-- that's what we did-- in the last kind of way we did our navigation, we made an A-tag and then put some padding around it, and a background color, in this case we're going to do, like a little rectangle, a little Div tag, and we're going to fill it with a background color, very similar principle. 

So let’s style that, actually let's see what we've got so far. So I'm going to save it, I'm going to go Live. Where did it go, on my other screen, we have this pretty thing. So let's make it look like a button first. So over here we're going to say-- can have a, got to target the Class first. So we're going to say Nav Button, it's going to be two, we'll do a background color. Background color. And we're going to pick anything; scroll down. Pick your favorite color, warm green looks good to me, semicolon at the end. So it's going to slowly build it up. 

We're going to give it some Padding. So we do Padding all the way around, and we'll do what we've done before, so 11 pixels and 25 at the top and bottom, left and right, there we go, so it's got Padding. Let's give it a width, I'm going to make mine a width of, I guess this is one of the big differences between doing with the A-tag The A-tag was just the width of whatever it was. In this case we actually had a Div tag, where we had to give it a size, because it really wants to be 100% all the way across. Also I want to make sure the Text-align is in the center. We're going to style the color later on. We're going to leave it just so we can actually start building this thing. 

Let's create our three buttons, so we've got this little group here. A Home button, I'm going to make another one, then I'll make a third one. So what I've got, Home, this one here is going to be called Products. This one here is going to be Contact Us. So, evenly spaced, we should now have three little buttons. And because-- remember A-tags are in line, they will stack next to each other, these are opposite. These are Block level, these are Div tags, they stack on top of each other. So I want to stack them next to each other. I want to say, you my friend, we'd like to display, Display inline-block. So it's a bit of both. Stacks next to each other, awesome, but pushes each other out. 

Next thing I want to do is I want to build the little Drop down. So what we're going to do is, we are going to put it here, so we can see it all the time, then we're going to turn it off by default until we get a Pseudo class of Hover, on this Products button, which is going to turn it back on again. That's the kind of real fundamentals of what we're doing. So first of all we need to put some stuff inside products, so after the A-tag, but before the closing of the Div. That means it's going to be inside this box, and kind of, we're going to get it to drop down out of that box, after the word Products. 

So I'm just going to put a couple of Returns in to make it a little easier. So what's going to go in here? We're going to put a new Container, so a new Div tag, and we're going to give it a name, I'm going to call this one, what are we going to call this one? The Drop down. Drop down-- let's call it Box just to try and be clear about what we're doing. Inside of this box, just like we did before, I want a bunch of these buttons. You can see how we're kind of getting into Narnia now, I say Narnia, I meant inception, we were going into different levels. 

So Navigation, there's one button, second button, this middle one has the link, but it has another container just after that link. We're calling it Drop down box, I'm going to style it. I'm going to pick a different color for it. We're going to have, how many Drop down menus in here? All right, three. So inside of our button, our product button, we've got the little link that finishes, and then before the whole button closes, we've got this other little group nested inside. We've called it Drop down box, and we've got one, two, three buttons inside. You with me so far? Maybe, yes maybe? I'm trying to make it look clean. Let's have a little look at how it is appearing; Ah! You can kind of see what it's doing, right? It's putting these buttons, inside this Product button, and it's kind of jammed in there. 

So what we'll do next is we'll just turn it off by default. So we've got this thing called Drop down box, so let's target him, so we'll say, Drop down. Drop down box. What do we want to do with him? We want to display, and we're going to go Display:none. So you've gone forever, well done, bro. So we've done Display, Display Flex, Display Block, Display Inline-block. We've done none yet. What does it do to it? Just turns it off, it's gone, and this is the trick, right? We're going to turn it back on using a Hover Pseudo-class. So what we spent so long, learning Pseudo-classes, it's going to come handier and handier as the class goes on. If the word Product's gone, you're like, "Yeah, the text's gone." It's probably because you accidentally had that kind of inside of three, it will go. It needs to be outside of that Drop down box that you turn off. Just above it or just below it, it won't really matter, and what we might do is add some commenting, because it will be--- just to explain to ourselves, what does this thing do. 

So remember, on my Mac it's 'Command /', gives me my '/*', and then ends with an '*/'. On a PC it's the same, or similar. It's 'Ctrl /', and my / is down by my question mark. And in here I'm going to be really literal to my future self. Turns it off when the drop down's not used, that's his job. So now we want to turn it back on. So I'm going to add a bit of CSS to say, this turns it back on. What I want to do is, the drop down box now, what I'd like to do is, I'd like to turn it back on, so display, put under Block, so you can appear, please. Block and None have a very similar kind of feel to the word, don't they, but we kind of understand Block now, because of earlier classes, Inline-block, it's just a chunk of stuff. So at the moment these guys are fighting it out. So what we can do is, say, this guy is only turned on when I hover above my Nav button. 

So my Nav button, there it is there, .navbutton with a Pseudo class of hover. So when this thing is hovered I'd like to then activate this, which is Display block, and it has to be this way around, this one can't be below this, because remember, it runs from the top, so first of all, gets turned off, then, if this condition is met, it's the Hover state, It's going to trigger this class to do something else, override that one to say, now display Block. Does that make sense? Let's have a little look. It's not going to be pretty. Well, what am I--, really guys, I left him over there, just messing about, there we go. He's not, where is he? I just forgot to save it, that's what I forgot to do. Come on, Dan. 

All right, now test it, ready, hover. Hey, it appears, in the wrong spot, but it appears. He's doing some weird things. So what it's doing is, by default all of these boxes here have a position of something called Relative, they're all relative to each other. so when these guys appears they all kind of unfold, and they're kind of like, well, I'm relative to you, and you're at the top, so I'm going to come down the bottom, and then I'm going to push everything else around. That might not explain it very well, but it's relative to his buddy. To turn that off you can say, do your Drop down box, I don't want you to be a position of Relative, which is that one. I want you to be a different one, something called Absolute. That's the opposite, it's the nemesis for Relative. It goes, I don't care where my buddies are, I'm just going to go where I'm told. 

Let's have a look, there it is. It's kind of working, right? At least it's not messing with my top menu, I need to stack them, but that's okay. So we told the Drop down menu, that Drop down class, remember, Drop down box, we said, actually, Drop down box, be position of Absolute, but what I'd like to do is I'd like to set the Nav button, I'd like to set you to Relative. So, position to Relative, I want these guys to be relative to each other, and it means these little guys are going to know where each other are, and stack above each other, so the Drop down itself, the container, is set to Absolute, but the actual Nav buttons themselves know where each other are, and they stack after each other. 

That my friends, is a pretty crude Drop down menu on hover. We'll fancy it up a little bit but those are the mechanics for it. Basically you turn it off, unless you have a Pseudo class, it says, hover, activate me, and then there's a bunch of playing around, getting everything to line up. And if you're like me, basically you're looking at this, going, "Mmm, what does this all do?" You can copy and paste this, keep it separate. So when you do start building a site just grab that whole chunk. Actually grab the whole Nav, and grab this CSS, and just start from that, if I'm honest, it's at a lot of the time what I do. 

One of the things you might have to do is, because ours is in isolation, this menu is appearing above this white background, because there's nothing down here. Sometimes what can happen is, this appears, and the Home, Home, Home ends up being underneath the content. So you got a big image here, the Drop down menu appears underneath. An easy fix for that is something called the Z-index. And the Z-index, think of, you got X and Y on your page, we've talked about that, Z is kind of coming towards you. 

So you can say, actually I want it to be a Z-index of, as long as it's 1 or above, if it's still not working, you can go up to 100, it just has to be pi. Basically everything is set to 0, and as long as you make it above 1 it should work. Occasionally there's times where you just need it to be 99 or something higher. As long as it's higher than 0. So I'm going to change my one at the moment, but I thought I'd throw that in there, because I always have problems with Drop down menus diving behind things. 

Next thing I want to do is, they're kind of overlapping that, so these buttons are kind of overlapping, so let's switch out the word Home, because it's confusing, and we'll position the Drop down menu a little bit. So over here, instead of the word Home, Home, Home, we're going to put in 'Item1'. 'Command D', grab both of those ones, 'Item2'. And I'll sort this last one out, '3'. Same thing, just with bit of numbers in there, and let's do the positioning. So the Drop down box, I don't want it to be kind of like, it depends, I want it to be down a little bit. So if I use margin, Margin Top, and I say, just go down like 10 pixels. We're going to probably run into a problem actually, let's have a look. You, 10 pixels did it, kind of lined up at the bottom there. It's hard because they're all the same color. I'm not going to, but what you could do is, they all use Nav button, so they're all being that lawn green. 

You might create a second Nav button, make the cool Drop down button, and just give it a different color, so that it's maybe a little clearer, and apply it over here. Still needs all of this stuff, but you might have two different colors, or you could be fancy, oh, Dan, don't be fancy. Be a little fancy? All right, let's be a little bit fancy. If there's a Nav button, that happens to appear inside a drop-down box, but only if it's inside of a drop-down box, change the background color. And this one's going to be cadet blue. All right, looks teal to me. Don't put in random characters; let's have a little look. 

Cool, all right, fixed it. Now, we put in 10 pixels, let's say we put in 20, let's see what happens. There's this weird bit where, if I hover above it, if I go fast I can get to it, but if I go slow there's this empty gap that goes, "Ah!", which is a bit annoying. So to get a round that is, because the drop-down box, is-- we can use margin on that, because the box is around the outside, the drop-down box is not giving it this color. This green color is coming from the button itself, not the wrapper box. The box doesn't have any sort of color. So I can use Padding and nobody will notice, that it's like an internal thing because it already doesn't have any color. 

So what I might do is, instead of doing Margin Top, I'll do Padding Top. That's one of the things with Padding, it's the insider, right? Margin is the outside, Padding is the inside. So hopefully it will look the same, but see this area here? It's actually part of that Div tag. I hope that kind of made sense. If we were using the drop-down menu to add the background color, it's not going to work, because it'd be some weird pushing out from that. So we use Padding instead of Margin. Now I want to push it that way a little bit, to the left. So you can use negative Margins or negative Padding. In our case it will--

Can you do negative padding? I don't think you actually can. Let's try Padding Left, and let's do negative. Let's go to -30, just to make a point. Nope, but you can do negative margin, negative margin, Left, -30, save that. Let's give it a test. There you go, move it across. I haven't quite got mine there yet, but depending on where you want it to sit. 

The other thing we might do is do like a little rollover. We've done that before, when we learnt Pseudo Classes. So the Nav buttons that are inside this drop-down box, we've changed the background color, but let's also, actually let's change-- we're kind of there. I want all of this, but I want to add a Hover. So inside a drop-down box when there's a Nav button that's been hovered, I would like it to do something else. I'll pick a different random color in here. I'm going to pick my own random color, Magenta-ish, save it, let's give it a go; doesn't work. Hey! Let's make it fade as well, remember, transition. Delay, actually duration is what we want, isn't it? Transition duration, I'll put it in for 1 second. Once it gets kind of long, it's a beautiful mix of colors. 

You can use milliseconds, is that-- yeah, milliseconds. So one millisecond is probably too short. Where is it, is it thousands? I think it's thousand. So 500 is half a second, a thousand is a second. I think it's how milliseconds work. You can see, just, twice as fast as one second, and if you make it-- I don't know, something small like one millisecond, 0.1 of a second, yeah super quick, you won't even see it. So I guess I just wanted to show you milliseconds, because, no real good reason. 

All right, that's going to be it, we've got the foundations in. So for this one to work we used Div tag as a box with an A-tag inside, instead of just-- earlier on I kept the A-tag, we just styled that to keep things easier. It looks a little bit more complicated over here, right? Wish I could just deal with all the A-tags but Div classes are needed, and you put the A-tag inside of it. Then there's this nested group, that we gave its own little name, and we turned it off. 

We said, Display:none, there it is there, and then later on we said, actually if that drop-down menu has a Nav button inside of it, that gets hovered over, change it from Display:none to Display:block, it turns it on. Then we had to play around with some of the positioning. So Absolute to get them to kind of push down from the bottom, and then we use this Relative positioning to get them to stack on top, relative to each other, but you know that, you just finished the video. All right, it's a recap, that's what that was. We're going to save this. So 'File', 'Save All', and let's close it all down. I'm going to close it down after the video starts. We'll do another one, basically, but we'll fold it into the existing website because there are some little tricks to make sure that works. So yeah, let's do that in the next video.