What's up?

Welcome back to see us history and 30 days.

Today's day number 27 we're gonna be building a drop down menu.

But first, I'm gonna be making some more modifications to my silly look on microphone here.

A student of mine actually suggested that I This has nothing to do with CSS.

By the way, he said in the box, it comes with, ah, large pop filter as well as the small one.

I think I'm going to try out the big pop filter.

So give me one moment.

Do you take this off?

Well, that is so silly.

Thanks, Student, for suggesting this to me.

Now I look even more foolish.

Oh, maybe it's cool.

Back to code.

And here we go.

We're gonna be making a CSS only drop down menu.

This is a super simple lesson, and all we're gonna be doing is building this simple little drop down.

So I got a button here that says drop down when I hover over at Bam, we just got three dropped on items.

Normally you'd build this, uh, you know, in javascript j query and and also CSS.

But I wanted to show you a really simple and lightweight version of just creating a simple CSS three drop down.

So up here in our sandbox, we've got just a simple button right here and then three links so that if none of the styles are working, then at least the links are visible, which is important for accessibility reasons.

Now let's go over to our code editor and open up the 27 drop down menu Fall were older Folder folder is what it's called and download that.

Open it up in your favorite code editor and open up the index and sandbox that CSS.

As always, final Nazi SS is there for your reference to make sure that you're on track and if you have any issues, you can always refer to that.

So here we go in the index.

Just a quick Lee show you the mark up right here in the sandbox.

We've got a divot.

The class of dropped down a button within that did with the class of drop down menu and then three links.

Simple symbol.

Sally Super Simple Sam.

Super Simple Stallion.

Sam set on super simple.

Sally and Sam sat on the seawall.

Super simple Sally Sam sat in the sandbox, Rico opened the sandbox.

And now what we're gonna do is we're just gonna give it.

You were gonna say, drop down and we're gonna go position relative, and let's go display in line block.

It's gonna be important.

And zed Index, let's do 10.

I was just use random numbers with that index.

Have no rhyme or reason to how I use Zet Index.

All I know is that if I have, I want one element in front of the other.

Or make sure it's in front of everything.

I'll put a really high number.

So there's your professional strategy right there.

Okay, Now we want to do is going to say, drop down.

Double underscore hover.

What I'm selecting there is simply the button.

It has the class of drop down hover display in line block as well.

I want to give this a patting of 10 pixels.

So we're just making the button look a little bit nicer here.

Um, my fingers are typing a little slower and clunkier than usual.

It's a little chilly down here in the basement.

I mean, my super high end premium studio up in the sky scraper background, color background.

We're gonna go 3 to 3 B 40 kind.

Reminds me of you.

Be 40.

The popular British reggae band.

You baby Lovely every day E I want to tell you a love you we even day in.

Yeah.

Color white arse a cursor pointer.

Save it.

Let's check it out.

Okay, so we've got a button here looking a little bit better, but I want that.

Ah, Went that border gone.

Buttons have weird borders by default and browsers.

So I'm gonna say button.

No border?

None.

So, you know.

Yeah, that's much better.

Cool.

Okay, so now what we're gonna do, we're gonna start zipping through It's a bit more.

Have been spending a lot of time making really high quality jokes.

So let's get back to coding.

Drop down, hover, hover.

That's interesting.

Background we're going to say to to to show a little bit of a dark gray.

And I'm going to also select the drop down double underscore menu.

And what we're gonna do here is gonna say position absolutes.

We're gonna go display none.

So this is the menu itself.

That's that, David, the class of dropped on underscore doubloons for menu as a sibling to the button.

So display none by default.

Top 100% left.

Zero.

Maybe What I should do is actually not display none for now, so you can actually see it.

So I'm gonna just comment that out, and I'm going to show you what's going on over here.

So this is starting to take shape.

So top 100%.

Let me just take that out to show you what happens.

Okay?

Nothing so far makes it seem like this isn't necessary.

Top 100% left.

Zero men, which we're gonna give it a 200 pixel men with background white as well.

And we're going to say who, baby a lot.

Not that background color.

3 to 3 you before I'll be 40.

Box shadow.

Just giggly today, that's all.

03 pixel to pick soul.

And then rgb a 0.3 So a little bit transparent.

Okay, check it out.

So far, we got a little made, a bit of a menu Here, let me take this top 100% and left out.

See if it even really does anything.

It's not really mattering right now, but I'm assuming the reason I just I did that was to override any browser specific defaults that might be messing with it.

So, for example, like top 0% will be covering that button.

The parent, which is the position relative of I do 100%.

It's at the it's 100% down that that height.

So it keeps it down there.

So that's good.

Okay, so now what I want to do is I want to fix those links there to make it look like a better list.

So I'm gonna say, drop down, double underscore, no drop down, hover and then combine that with dropped down double underscore menu.

Okay, display block.

When I hover, it's gonna be displayed block.

Now, remember, keep in mind, this is normally not displayed it all, but I'm displaying it as none.

So the reason why I put that there is because I'm gonna say display takeaway, display none and put that back in.

And so now it's not there.

I want to have her booms display block.

So now it appears.

So now we're playing with an actual drop down menu.

Okay, uh, we're gonna see padding 10 pixels Start making this look a little bit better.

Text decoration?

None.

I don't want those links have underlines.

Border top Solid one pixel one pixel ee Oh, ee oh ee oh ee zero a zero a zero.

Save it.

Check it out.

So far.

Looking better.

Ah, but those list items need to be Oh, you know what?

I didn't do this right?

Drop down hover.

Final drop down menu is display block.

But now this is gonna be dropped down menu, eh?

A.

There we go.

So now we're going to see those links do that.

That's better, right?

There.

Kind of things are looking a little silly.

There's a border none and also display block.

That's something that we need to do Now.

This is looking much nicer.

In fact, it's just about done.

So now what I want to do is say, drop down, double underscore menu A.

And then when you hover over the A elements, background is gonna be fo fo fo or f 000 not f o.

Because you can't put the letter o in there at zero color and then 3 to 3 b 40.

Save that check it out Boom, boom.

Look at that.

That is a nice, tidy little CSS only dropped down with Onley.

About 49 lines of CSS and very minimal market.

Just a few lines of HTML.

So there is your CSS only drop down menu.

Thanks for spending some time with me today.

Coding up.

The drop down menu can lead to Seo in gay number 28 don't forget good job.