13.4 Dropdown menu - Video Tutorials & Practice Problems

<v Michael>In the final two sections of this chapter,</v> we're going to build a dropdown menu, first for a regular browser and then for mobile. And this is a really good solution to a common problem on websites, which is that you've got too many things to fit in a header like this. So let's take a look at an example of this. Lee, you like to use Amazon as a good example of a nice dropdown, right? <v Lee>Yeah, they have a huge dropdown on their site.</v> It ends up taking up pretty much the whole page. So, it's something they've thought about a lot. <v Michael>So for example</v> departments. <v Lee>Click the departments.</v> Yeah, and then if you scroll down to any one of these, it keeps extending and fills up everything. So, I mean, this is beyond just a dropdown navigation. This is like a whole sub-site, basically that's just about navigation. <v Michael>Yeah.</v> So we're not gonna make something quite this complicated. <v Lee>Yeah, we're not gonna be putting ads in it.</v> (men chuckle) <v Michael>But this will be a good start.</v> And we're gonna go just about as far as we can go with CSS by itself, is that right? <v Lee>Yeah.</v> <v Michael>Or can it get</v> even more complicated? <v Lee>So in this chapter,</v> we're gonna do just a hover dropdown menu that will respond to your cursor and this is only using HTML and CSS and then in the next one, we'll actually take what we made and convert it to a slightly more complicated dropdown that actually uses a hidden input element, a checkbox and that actually makes it so that mobile users would be able to use the dropdown menu because the problem is, is that on mobile, there's no hover. <v Michael>You mean in this section, right?</v> You said in this chapter. <v Lee>Oh, I'm sorry, yeah.</v> <v Michael>This section.</v> <v Lee>In this section</v> we're doing a hover one and then in the next section-- <v Michael>Got it.</v> <v Lee>We're doing one that will stay open for mobile.</v> <v Michael>Right.</v> <v Lee>So yeah,</v> but we're only using CSS and HTML for these, so no JavaScript. <v Michael>Cool.</v> So let's take a look at one of the most important ideas when talking about these sorts of minis, which is a hit box. I did not know about this. Apparently it's a video game term. <v Lee>Yeah, well, it's just the area of</v> the screen that is gonna do something. So all links have an area that is active and that's the hit box. So when you're adding padding to something or width or height or things like that, you're changing the size of the hit box. And what's important to note here is that when you're doing this kind of hover dropdown menu, you have to keep the cursor always in the hit box that controls the dropdown menu. If your cursor goes outside of like the little square, like see Gallery? <v Michael>Mm-hmm.</v> <v Lee>If your cursor goes outside of that,</v> and this is the element that is controlling the dropdown menu, then the dropdown menu will disappear. So you have to make sure that the hit box is big enough that the cursor always stays in it and we'll show you exactly what we mean by that. So here's just a link and you can see the pink area would be, that's what's clickable. If you were to make that link inline block and add padding around it, the clickable area gets a lot bigger. <v Michael>Right.</v> <v Lee>Right.</v> And just so everyone knows, like the text says margin does nothing to change the click area. It's only padding and the size of the element itself. So in the actual menu, what we're gonna avoid is a gap. So we're putting a dropdown menu inside an element, but we're gonna be using absolute positioning and since absolute positioning is outside of the document flow, it's possible to have a gap between the elements. And now if this was our menu and we hovered on this and tried to scroll down to it, as soon as the cursor hits there, the menu's gonna disappear. <v Michael>Yeah, it's no good.</v> <v Lee>Right.</v> It's really frustrating when it happens and you see it all the time in badly programmed sites. So what we wanna do is make sure that there's enough padding around so that it's a continuous hit box all the way down into the menu. And then once you're in the menu, you're still within this item, this element. And so it'll stay open. <v Michael>All right.</v> So we'll be putting this in the nav links, right? <v Lee>Yes.</v> <v Michael>Let's take a look at that.</v> <v Lee>And this is also why we styled the nav links before</v> and the LI's in here with that child selector so that it would be possible for us to put in a sub nav without styling them. <v Michael>Right, so if we did this,</v> then it would style the sub menu. <v Lee>Right.</v> <v Michael>But with the child selector,</v> it'll only style the first level. <v Lee>Yep.</v> So we're gonna make the blog nav item here a little bit more complicated. <v Michael>Okay.</v> So let's start with, we're just gonna add some new lines here. So it's just the blog that's gonna be dropdown? <v Lee>Yeah.</v> <v Michael>Okay.</v> So that'll be our example. We'll give it a class of dropdown. This is the kind of thing, like, we don't know what this is gonna do exactly, but we know that we want a dropdown menu on this blog, so when we hover over here, we'll get a menu. So we can just preemptively put in a class. And then what have you got here? You've you've got, okay, this is another class on this. <v Lee>Right.</v> <v Michael>On the link.</v> <v Lee>So I'm actually making this one</v> slightly more complicated. There's actually one way to do this that is actually a step less complicated in that there wouldn't be this link that's there that goes to the blog still. You could do this all just with the LI but then you wouldn't be able to click on blog. Sometimes I think it's nice to have a dropdown menu where the actual nav item is still clickable and would take you to the blog, but then also has sub nav items. So that's what we're making here is the slightly more complicated version. You could just theoretically not have this drop trigger here and you wouldn't need it. <v Michael>So now our method for making</v> the sub navigation, which will have the most recent five posts. So just similar to this here, or is it not, oh, here the recent posts. That's right, I was looking for the mobile location. So we're gonna have the most recent five posts. Our method is gonna be to have a nested list. Again, we just mentioned this, that that's why we use the child selector. This is gonna be a UL with class drop menu. And then you can put in an LI for each post and recall, what do we have? Was that? Yeah, so this is for post in site.post limit five. In fact, we can just copy this. Do the same thing we did here and for each of these, we'll have an LI with a link to the post and the post title. Remember the post has an attribute underneath that space, which is the URL. And it also has a title. Can reach post, we're giving it a title here in the front matter so we can do, post title. So this is Liquid combined with HTML, and then we need an end for. Is that right? Am I missing anything? I'm missing a closing. It's like, my brain is telling me that there's something missing. Missing the closing tag there. <v Lee>Yep.</v> <v Michael>All right, let's take a look at what that did.</v> Does it do anything? We'll find out. Oh, look at that. It's it does put things in, but it looks terrible. <v Lee>Yeah, not so good.</v> <v Michael>Okay, but it's there, the HTML is there.</v> Here the most recent two posts. <v Lee>Right.</v> <v Michael>All right, so now we have to do some CSS.</v> So can you walk me through this here, Lee? We can go to the header styling? <v Lee>Yeah.</v> So first we're gonna be adding in a little style here to make sure that anything that has that drop trigger class attached to it ends up looking like the header nav. <v Michael>So we can add a class here then.</v> <v Lee>Right, so that if we didn't wanna have</v> an actual link to the blog, but just a span that looks like a link, it would still fit with the rest of the stuff. This is just a little bit of defensive programming, just to make sure that the drop trigger gets treated just like all the other links. So same thing for the nav links, A is just adding in class drop trigger. Sometimes a little bit of defensive programming is not a bad idea. <v Michael>Got it.</v> <v Lee>All right, so then what we're gonna do</v> is we're gonna do a new section below this at the bottom of the header. Yeah, we'll just put it down there and we'll do dropdown and position relative. So remember this class went on the LI that wrapped this whole thing. So by setting position relative, we're making it so that we can absolutely position stuff within the class dropdown and not have it appear somewhere else on the page. <v Michael>You said it's positioned relative,</v> but then you said absolutely positioned. <v Lee>We're gonna absolutely position the menu.</v> Within the dropdown. If we didn't put position relative on the dropdown, then the menu would be positioned based on the next thing up the tree. <v Michael>Oh, I got, yeah, so it's based on</v> like the parent that has a position. <v Lee>Right, so right now we're just trying to</v> localize it within the dropdown class. <v Michael>I understand, cool.</v> <v Lee>So then we're gonna do drop trigger</v> and we're gonna do display inline block and give it a little bit of padding and also a position relative, because we're actually gonna use the after pseudo element to add in a little downward pointing triangle so that people understand that this is a menu item that has a dropdown menu. <v Michael>Okay, let's see what's going on here.</v> <v Lee>Not much, yet.</v> <v Michael>Not much yet, all right.</v> <v Lee>So this is gonna be our drop trigger indicator.</v> So this is gonna use the after pseudo class, and then we're gonna do the border trick to make the triangle. <v Michael>Right.</v> That's what we used here to make this, right? <v Lee>Right, yeah.</v> So we're gonna do a border 0.3M, solid, and then we're gonna only style one of the sides the border to have a color. <v Michael>Is it doing anything yet?</v> Still not there. <v Lee>Nope, not yet.</v> <v Michael>Okay.</v> And then we need to-- <v Lee>You have to add</v> the empty content content. <v Michael>Content, right.</v> <v Lee>And now you're gonna have to give it height.</v> <v Michael>I just wanna remind myself</v> where we did that before, so that's here. <v Lee>Yeah, it's anytime that you want to use</v> the before or after, and you want it to appear on the screen, you have to add content of some sort, even if it's empty and you also have to add dimensions if you're not gonna put something in the content. So that's why right now we need to do height zero and width zero at the very least. So this should show up on the menu now, if we save and refresh. <v Michael>Ah, there it is.</v> Very subtle, but you can see here, there's a little arrow. <v Lee>Yeah, we're not looking for a giant,</v> blinking neon light of an arrow. Just a little indicator that there's something. Next thing we need to do though, is obviously give this some positioning, 'cause that's not in the right spot. <v Michael>Right.</v> <v Lee>So we're gonna do top 0.3M</v> and right of 0. Guess I should have done that one first alphabet order. <v Michael>That's fine.</v> I mean, sometimes the logical way to do it or just the way you think about it, isn't necessarily alphabetical and we need to give it a position as well? <v Lee>Yes.</v> <v Michael>Will this do anything?</v> Let's take a look. <v Lee>No, 'cause it doesn't have a position.</v> <v Lee>Right, okay, that's what I thought.</v> I just wanted to confirm my guess though. <v Lee>Position absolute for this bad boy</v> or girl. <v Michael>Right here we go.</v> Take a look. <v Lee>I don't really know what a triangle is.</v> (Lee chuckles) It's just a geometric shape. <v Michael>Yep, okay.</v> So that's now it's looking, it's like right next to the blog. <v Lee>Yeah, so idea is that it's, you know,</v> giving you a little indicator that there's something more underneath, but now we need to style the drop menu. 'cause the drop menu is just on the page right now. <v Michael>Right.</v> <v Lee>And you can see it's pushing</v> the other content around. So let's do, first of all drop menu position absolute. <v Michael>That changed something right away.</v> <v Lee>Yep.</v> <v Michael>Yeah, look at that.</v> <v Lee>So now that is, yeah,</v> it's moved the drop menu outta the flow and you actually can't see the links. They are there. This is not actually hiding. It's just that the links are white text. <v Michael>Ah.</v> <v Lee>So if we wanna be able to see it,</v> we could actually do drop menu, LI and background color. <v Michael>Okay.</v> <v Lee>We're gonna give it white</v> as the background color and then we're gonna do drop menu A and we're gonna give this a darkish gray of 333 and we're also gonna make these display block. So this will at least give us something that we can see. <v Michael>Okay.</v> <v Lee>While working on the rest of the styles.</v> Hey, look at that. <v Michael>Yeah.</v> <v Lee>Cool.</v> So let's work on the drop menu itself a little bit more. <v Michael>Okay, right in here?</v> <v Lee>Yeah, so we're gonna do list style none.</v> And we're also gonna set the padding and then Michael's gonna use F5 to resort these in alphabetical order. <v Michael>All right.</v> <v Lee>And then we're gonna position this.</v> So we're gonna give it a right of 0 to pin it to the right hand side of the drop down class. And we're also gonna give it a Z index of nine just to make sure that it's on top of other stuff. <v Michael>So this nine is just like a high enough number.</v> <v Lee>Yeah, high enough to be higher</v> than other things. <v Michael>High-ish.</v> <v Lee>All right, now what do we have?</v> Okay, there we go. It's looking a little bit better. <v Michael>Yep.</v> <v Lee>So what we want to do right now is hide it.</v> So set that to display none. <v Michael>So which one?</v> <v Lee>The drop menu.</v> <v Michael>So this will hide it.</v> And then when you wanna make it visible, when we mouse over or click whichever, both, either. <v Lee>Mouse over 'cause there is no CSS for click.</v> <v Michael>Right, so that would be like</v> an on click in JavaScript, which-- <v Lee>Right, so what we're gonna do is drop down hover.</v> <v Michael>Okay.</v> <v Lee>The class dropdown hover.</v> You can put it right up after the stuff for dropdown since it's... <v Michael>So where is it gonna go?</v> Oh, I see. <v Lee>So drop down hover.</v> <v Michael>Is it this?</v> <v Lee>Yeah,</v> colon hover, yeah. And then we're gonna target drop menu. No, you have to go back out, add drop menu. <v Michael>I see.</v> <v Lee>So what this is doing is when you hover on dropdown,</v> you're targeting the drop menu class that is inside of drop down. <v Michael>Okay.</v> <v Lee>And so we're gonna say display block.</v> Display block, undoes a display none. So now when we save and go back, there will be no dropdown menu. And then when you hover, there will be a dropdown menu. <v Michael>Ah, look at that.</v> <v Lee>Yeah.</v> <v Michael>Could this be display,</v> like, is there like an auto or some way to restore it? <v Lee>You might be able to do unset.</v> <v Michael>Display unset.</v> Is that valid? Huh, looks like that works too. <v Lee>Yeah.</v> <v ->I mean you could also do inline block.</v> You could do a whole bunch of different things right there. <v Michael>Right, okay.</v> <v Lee>Cool.</v> <v Michael>Okay, so is this is working now then</v> if I hover over. <v Lee>So it's working.</v> <v Michael>It's not styled but if I click on this,</v> it'll actually work. <v Lee>That's right, yeah.</v> <v Michael>Look at that.</v> So it doesn't look good yet, but it's actually functional. <v Lee>Right.</v> So let's actually change something right now. Let's change the dropdown to have a border, a red border, just one pixel. <v Michael>So we're just gonna do this temporarily?</v> <v Lee>Yeah, just to illustrate what's going on here.</v> <v Michael>All right, so what are we gonna do?</v> We're gonna do drop. (keyboard clicking) I see. <v Lee>So just to remember, this is the area</v> that is only valid for the rollover right there. And then what we're gonna also do, oh can you go back? Thanks. Is now... (keyboard clicking) See how the-- <v Michael>Ah yeah.</v> <v Lee>These things are right next to each other.</v> <v Michael>Yeah, there's no gap.</v> <v Lee>Right, so there is a gap</v> that is actually transparent. This black is not actually a black border on the top. If there was something else there that would show through. So this is the colored part of the thing. But that little bit of padding that separates it, makes sure that the roll over effect still works. <v Michael>Right, so when you say this isn't a true gap.</v> It's like, it's a visual gap, but it's not a gap in terms of hit box. <v Lee>Right yeah, exactly.</v> And it's also not, I mean, here you can see it, like this. You can see that the... That's weird, oh that's why. See, now it's white behind there. So it's transparent behind there is the point. <v Michael>Got it.</v> <v Lee>All right.</v> But now let's style that dropdown so that it looks just a little bit nicer. <v Michael>Okay.</v> I'm gonna undo. <v Lee>Oh yeah undo our two borders.</v> <v Michael>The borders.</v> This one here? <v Lee>Yep, okay,</v> so we're gonna be styling drop menu first and we're gonna give it a box shadow. It's down. <v Michael>Drop menu, here.</v> <v Lee>And so this box shadow is gonna be 00.</v> So it's not gonna be moved left or right. It's gonna extend 10 pixels and it's not gonna have any thickness to it. <v Michael>Okay, that's good.</v> Thank you for reviewing these 'cause I'm still, I would have to look it up. It's not memorized yet. <v Lee>Sorry, the 10 pixels is the blur</v> and then we're gonna give it an RGBA of 000 and 0.2. So this is gonna be a pretty light shadow. <v Michael>Okay, let's take a look, what will that do?</v> <v Lee>You can see just a little bit of the shadow.</v> <v Michael>Oh, yeah, just on the edges here.</v> I do see it, it's quite subtle. Okay. <v Lee>So now we're gonna actually add a drop menu before.</v> And we're gonna use another little pseudo element in here to add a nice, a secondary indicator. Just to point up. It's kind of nice to have these on menus sometimes. A little triangle wedge shape thing on the top so that you see where the menu is pointing to. <v Michael>Okay, I don't completely understand,</v> but we'll see what it looks like. <v Lee>Okay, well we're gonna use the border trick again</v> to make a triangle. So border 0.6M solid, and then it's gonna be border color, transparent, transparent and white. So this is styling the bottom of the border. So it's gonna be an upwards pointing triangle. <v Michael>Okay.</v> <v Lee>Content is gonna be blank</v> because we want this before to be shown on screen. Height, 0. We're gonna position absolute it. Right of 1M. Top of negative, 0.1M. So this is gonna be pulled up a little bit on the box and then a width of zero to finish the dimensions of it. So now when we refresh, there'll be a little triangle. Oh, look at that. <v Michael>Oh, I see, it's right here.</v> <v Lee>Yeah.</v> <v Michael>Ah yeah</v> it's nice. <v Lee>It's kinda like</v> a little indicator of where you are. You can actually use this for things like comments or stuff like that too. It's a handy little-- <v Michael>I just wanna see.</v> <v Lee>Style to use.</v> <v Michael>Yeah.</v> <v Lee>It's you're not gonna be able to see it</v> 'cause it's in the box. <v Michael>Oh, I see, it's right here.</v> But yeah, you can kind of see how it's covering the text just a little bit. So I see why we need to do this to pull it up, so that it's right there. So did you tweak it so that it exactly fits? <v Lee>Yeah.</v> <v Michael>'Cause it looks like now it doesn't quite fit.</v> So basically this is interactive. You just have to say, all right. Well, I mean, if I do like negative, you know, 0.5M, it'll be way too high then there's this gap. <v Lee>And it's actually a lot easier to do this,</v> just using the inspector instead of having to save stuff. <v Michael>Right.</v> <v Lee>So then you find what the right value is</v> for the look that you wanna make. <v Michael>Got it.</v> <v Lee>Yeah?</v> All right, so let's actually turn the focus on the links inside now and we're gonna do a generic sibling selector for the drop menu LI and we're gonna give it a nice little border top. <v Michael>Yeah, so now we're working on</v> these links in here? <v Lee>Yeah.</v> <v Michael>I see why you leave off the spaces</v> here sometimes. (Lee laughs) It is a little annoying to type them out. <v Lee>Yeah, especially for things like 0, 0, 0.</v> It's a lot faster to be able to just 000, you know, no space. So then what we're gonna do here, we're gonna get a little tricky. We're gonna use our pseudo classes, our first child and last child, you can't really see this yet. Those will be -- <v Michael>That's really, really subtle.</v> <v Lee>Yeah, they'll be more apparent</v> when we have padding in there. So we're gonna use our first child and last child pseudo classes. So we're gonna do drop menu, LI first child. And we're gonna give this a border radius so that the top left and top right borders are five pixels. So border radius actually works a little different than the other things in that it goes top left, top right. <v Michael>Oh, interesting.</v> <v Lee>Bottom right, bottom left, yeah.</v> <v Michael>Yeah.</v> Okay, so top left, top right. It's kind of going, and then bottom, is it bottom? <v Lee>Right and then bottom left.</v> <v Michael>Right, makes it, so it just goes around.</v> <v Lee>Yeah.</v> <v Michael>Circle.</v> <v Lee>So we need a 00, yeah.</v> <v Michael>Oh, I see it, it's rounding this out here.</v> <v Lee>Yeah, but we're actually gonna,</v> let's add something in the HTML. <v Michael>Okay.</v> <v Lee>Let's add an empty LI outside of our loop.</v> So this will actually give us a nice little header on the top of the menu. All right. So now we're gonna add some styles that target the text that's in that first little header there. <v Michael>Let's just take a look here.</v> <v Lee>Yeah, you can't see it, it's white text right now.</v> <v Michael>Yeah, yeah I see it.</v> It's there. <v Lee>So let's, we'll color the text a gray of 333</v> <v Michael>So what's--</v> <v Lee>I'm sorry, 999.</v> The one that we were just working on. <v Michael>Oh, still the first child?</v> <v Lee>Yeah.</v> <v Michael>Okay, I see.</v> <v Lee>So this first child is gonna be</v> like our little header for the dropdown. <v Michael>Right, so this is--</v> <v Lee>999, yeah.</v> <v Michael>Right, so take a look at.</v> <v Lee>There we go, see?</v> And we're gonna do some little trickery to that. So font weight, normal. This is just defensive programming. We're gonna give it some padding and these values were created by just doing tweaking in the inspector. Oh, I'm sorry. It was supposed to be font size, 0.5M. <v Michael>Okay.</v> <v Lee>Sorry, I didn't mean font weight.</v> I was looking at something else. <v Michael>Okay, that's a little smaller,</v> quite a bit smaller actually. <v Lee>Yep, so we're gonna do text line right.</v> And text transform uppercase. Yeah, it's quite a bit smaller, but it's meant to just be a little label so that if you had a bunch of dropdown menu, you've put test transform. <v Michael>Oh.</v> <v Lee>So that if you had a bunch of dropdown menus</v> for different things, you'd be able to tell what it is. So recent posts. Hey, there it is. <v Michael>Yeah, it's a lot more visible</v> now that it's all caps. <v Lee>Yeah, all caps actually makes things</v> a lot more easy to read if they're small. <v Michael>Yeah.</v> <v Lee>So that's pretty good for our first child.</v> We should do the last child as well. So that it's rounded on the bottom. So we're gonna do drop menu, LI, last child, and then the opposite of border, the border radius. <v Michael>So I think I can get it.</v> So it's into this. Like that? <v Lee>Yep.</v> So it should be now both sides'll be rounded. <v Michael>Yeah, got it.</v> <v Lee>There we go.</v> <v Michael>Yeah, it looks a lot nicer.</v> <v Lee>And notice the shadow also fits to the round edges.</v> <v Michael>Yeah, it's so subtle,</v> but it really adds a nice little bit of polish. <v Lee>Yeah, a little depth</v> and a little bit of polish is always good. So now let's style the A's a little more, the links. So we already have the color and the display block. So this is where I meant to say font weight, normal, just to make sure that nothing gets in here and messes with them. <v Michael>Okay.</v> <v Lee>We're gonna add padding</v> and like the first child padding, this was tweaked to find the right sizing. Or not right sizing, but a pleasing sizing. <v Michael>Right.</v> <v Lee>We're gonna do text line left.</v> Text trans, it's not, yeah it's not gonna do anything yet. Text transform, none, so that we get rid of that uppercase thing. And then we're gonna use that white space property that we used in the gallery to do the thumbnails. So we're gonna use white space, no wrap. And this is gonna put all of the text of the link onto one line. <v Michael>Ah, yeah, this'll make a big difference.</v> Yep, nice. <v Lee>There we go.</v> And you can see, that was a pretty quick change. Changing the font, changing the text transform to not be uppercase and putting it all on one line. Suddenly it looks a lot more presentable. <v Michael>That's amazing.</v> Just these two rules went from this, which is like, what's going on here? To this, which is like, oh yeah, this is good. <v Lee>Yeah.</v> <v Michael>Which is why, I mean,</v> if you just delete everything, it's like, "Ah!" The whole site, it's like what happened to this site? And then yeah, CSS works. <v Lee>So let's add a little styling for those links</v> so that they have their own hover state. So drop menu A hover. <v Michael>Yeah, I wondered about that.</v> I was like, I'm hovering on these, but it's just changing the color. It seems like it would be nice to change the background or something. <v Lee>Yeah, for a menu,</v> it's nice when the whole bar kind of changes. <v Michael>Yeah.</v> <v Lee>So what we're gonna add is a background color</v> where we do an RGBA and we're gonna do 10% black, so 0000.1. And we're also gonna change the color too. <v Michael>Oh yeah, look at that,</v> <v Lee>Because it kind of clashes now with the orange,</v> so we're just gonna have it stay the same color and so the indicator is gonna be the fact that the background changes. <v Michael>Right, so this 333 it's the same?</v> <v Lee>Right, so we're forcing the color to stay the same.</v> <v Michael>So now we get this.</v> Yeah, that looks nice. <v Lee>Yeah it looks like a</v> traditional operating system menu. <v Michael>Right.</v> <v Lee>One additional little thing that we can do</v> is we can style up the drop trigger. <v Michael>So that's,</v> what's that one, just the drop trigger? <v Lee>That's the link that we have the blog going to.</v> And so it has that little arrow. Notice when you hover on that, arrow stays white. <v Michael>Right.</v> <v Lee>We can do better than that.</v> <v Michael>Yeah.</v> <v Lee>So actually let's put this up</v> by the dropdown styles. <v Michael>Where is it?</v> It's dropdown. <v Lee>So drop down hover</v> and then we're gonna be targeting the drop trigger after. <v Michael>'Cause that's where the--</v> <v Lee>That's where the little arrow is.</v> <v Michael>Yeah.</v> <v Lee>And the only thing we have to do here</v> is change the border color. And so we only wanna change the color of the top segment of it. <v Michael>Right.</v> <v Lee>And so we're gonna--</v> <v Michael>That's this right here, right?</v> We're just using the same thing here. <v Lee>So we're gonna use our orange color for this.</v> <v Michael>And yeah, where is that?</v> Is that? <v Lee>It's that right there.</v> <v Michael>It's this one here.</v> <v Lee>This is such a small thing</v> but come on, it's a little nice to have like, oh look, it's open. Now when you're in the menu, it's down. <v Michael>Yeah look at that.</v> <v Lee>And the reason why those are different</v> is because the blog is actually a functional link. So you can click blog and it'll take you to the blog. <v Michael>Right.</v> <v Lee>But then once you're in the menu,</v> it's showing you, oh, this menu item is open. <v Michael>That's cool.</v> Okay, what's the next rule to add? <v Lee>So the last thing that we're gonna do,</v> if we go back to the page and look because of the way that we set everything up with includes, that doesn't look right. <v Michael>Oh yeah, look at that.</v> <v Lee>So we could style this so that everything works,</v> but you know what, a lot of times for a footer, it's kind of nice to have a slimmer navigation instead of like the exact same thing replicated. So what we're just gonna do is we're gonna end up hiding the dropdown menu if it's in a footer. <v Michael>Okay.</v> And so we can just put this, like at the bottom of all the? <v Lee>Exactly, we'll just give this a section</v> with its own little comment tag on it. <v Michael>Okay, actually,</v> so let's put a comment for the dropdown styles. <v Lee>Yeah, that's a good idea.</v> <v Michael>Here.</v> And we'll indicate by the lack of a new line, I guess that this is still part of the dropdown stuff. So we can do this. It's kind of a subtle indication, but it's clear enough. And then, so we'll wanna scope this by the footer class. Just remind ourselves, what it looks like here. Class equals footer. And then... So it's the same dropdown hover, drop menu. <v Lee>And so we're just gonna override the other one.</v> So this is slightly more specific because we have the footer added. And so we're just gonna say display none. <v Michael>Okay.</v> So let's take a look at that here. Yep. Okay. <v Lee>But we have the little arrow.</v> <v Michael>Yeah, we wanna rid of that.</v> <v Lee>Right.</v> So we want to get rid of, we'll add a comma and just a second line to that. It's footer drop trigger after display menu. <v Michael>Right.</v> <v Lee>And we also need to deal with the padding</v> on the right hand side of the drop trigger. So footer drop trigger, padding right, 0. <v Michael>Where is that?</v> Where is that padding? I just broke it. Yeah, there it is, it's working. <v Lee>So see the blog is a little bit farther away.</v> <v Michael>Oh yeah, there's too much padding,</v> I see it, yeah, the space is too big, Right, 'cause basically the drop trigger is still there. Right? Is that right? <v Lee>Right.</v> <v Michael>Because we're including the nav links here,</v> so the drop trigger still has padding, so we wanna make it 0. <v Lee>Exactly.</v> <v Michael>I got it.</v> Ah, yeah, look at that, a lot better. <v Lee>Now it all looks normal.</v> <v Michael>All right, well this is working now.</v> Looks like everything's looking nice. All the links are functional, so this works, this here takes us to the right place and so on. So now we're ready to adapt our dropdown menu to our mobile design.