In this video, I'm going to show you how
to do a drop-down menu. I'll keep using my template exercise from last week. As you can
see that my navigation tabs are all messed up because I've already deleted all my CSS files
for the navigation tabs. Inside the body, the first thing I have to do
is to add a class for the ul. I will name it as navigation. To create a drop-down menu you have
to use nest ul. So I'm going to click over here, give myself some space, and type ul, inside ul, I have li, and inside li, I will have
a <a>, and have a placeholder and press the tab key. So inside the link, I'll type KN95.
I'm going to copy this a few more times. The second one, I will change it as Surgical
Mask. The third one will be Cloth Mask, and the last one will be Children's Mask. I'm
going to add one more navigation tab. So I'm going to type li a, inside I'm going to give
a # sign and tab. And this I will say Country. I'll also give a drop-down menu for this
navigation tab, so I'm going to type a nest ul. The first one is going to be
U.S.A., the second one is Taiwan, and the last one will be Korea. So my nested navigation tabs are done, as you can
see in my preview. I'm going to ctrl + S to save it. Yes, I'm going to update it, and close. I'm
going to close this dwt file. I'm going to open up my index.html. Now since I'm only working on the
CSS, I don't need the template file anymore. In my index file, I've already inserted a background
image, and also on top of the background image, I have two images. I used absolute positioning
to place these two images here, and I've also given a class to the section. I named it as home.
As you can see in my CSS, I have a section home, a background image. And then both images are
175 pixels tall, with a position of absolute. And the image first-child is this first image
and the image last-child is this second image. And the first image I give a z-index of 1 and the
second image has a z-index of 2. Now it's time to start styling all these ul here. So I'm going to
click over here, give myself some space. The first thing I want to do is to take out all those
bullets from the ul. So I'm going to type ul, list-style-type, none. So this will
take out all the bullets from the three ul's. And the first ul I have is the navigation. I'm going to use flexbox to create my
drop-down menu. So I'm going to type display, flex, justify-content, center. So everything
will be positioned to the center of the nav as you can see right here. And the
second one is the li, so navigation li, the only CSS rule I have
for li is for the position, I will give it a relative. You'll understand
why later on. And now I'm going to style all the link. So I'm going to have a
navigation, bigger than, li, bigger than a. Now the reason I'm using these bigger than
symbols is because I have 2 nested ul. And I don't want the li inside those nested
ul the same as this one. Bigger than means the li directory under the navigation, and
this bigger than means the link directly under the li. The first thing I want
to do is create a display, block, and the color, white, and increase
the font-size to 2rem and text-align, center. Save it first. Now I want to give some
padding to the a, so I'm going to type padding, 10 pixels at the top, zero on left and
right, and 15 pixels at the bottom, and also I'll give some margin, zero at top and bottom, 10
pixels on left and right. Now in order to see the nested ul, I'm
going to hide the background image first. Now you can see this is the nested ul. Next, I'm
going to style the nested ul. So I'm going to type navigation li. So this is the list item, inside
the list item, is my nested ul. So I'm going to type ul. Now there are quite a few different
ways to hide this ul. I can type display, none, now this is gone. Or I
can use visibility, hidden, now, this is also gone. I'm
going to use max-height, 0, and overflow, hidden. So this
is also gone. Now since the li has a position of relative, so I'm
going to give a position of absolute. Now when I want to mouse over these
li's, I want my nested ul to reappear. So I'm going to type navigation, li:hover and
then ul. That means when I hover over the li, what is going to happen to my ul? All I need to
do is give a max-height of 400 pixels. You can change this height to anything you want. So I'm
going to save it first. Now when I mouse over, you see my nested ul is coming back. So I'm
going to style the li inside the nested ul. So navigation, ul, that means the nested
ul inside the first ul, then li, a. I'm going to give a font size of 1.6rem, a background-color of 333. Of course,
you can use any color you want. And the color of the type is white. Most
important, I have to give a display block, and also I'll give a padding of 5 pixels at the
top, zero on the right, five pixels at the bottom, and five pixels on the left. So let's take a
look. Okay, see what happened? It's covering up by these two pictures. Now I'm going to comment
out my background image so I can see my background image again. Now let's take a look at this. When I
mouse over. I don't see anything. So let's go back to our nested ul. It has a position of absolute.
So I'm going to give a z-index of 100, as big as I want. Now this time when I mouse over, you can see
it because the z-index is 100 and these two has a z-index of 1 and z-index 2. now I can see that
the Children's Mask is divided into two lines, so I'm going to give a width for the ul first. So
I can type anywhere I want, I just give a width of 160 pixels. Save. Now this time the
Children's Mask is on his own line. And then we'll also change the position,
let's say if I give a top of 0, left as a zero, now we see the nested
ul starts from the top of the nav, actually is not the top of the nav, it's
the top of the li. So I'm going to move the nested ul down to the bottom of the li. So
I change the top from zero to 40 pixels. Okay, so this time it's working. Next, I want
to separate these li's with a border over here. So instead of giving a border-bottom,
I will give a border-top. So I'm going to type navigation ul li~li, that means all the li after
the first li. I'll give a border- top, solid, one pixel, white. It looks pretty
good. Now when I mouse over, first I want the background image(color) to change. So go back
to my navigation, and type navigation li:hover, background, color, #8b, one two three four, four zeros.
Save. Okay. So the background changes to red. I also want to make some changes to
this li, so I'm going back to my a over here, and type navigation ul l i a:hover. So I want to change the color of the type to yellow, I also want the text to change into
all capital letters. So I'll type text-transform, uppercase. Okay. Let's take a look. Okay. So that is working very nicely. I'm
going to mouse over the Country, it's also working very nicely. But it's jumping, it's
not scrolling. So the way to solve this problem is to go back to the nested
ul and give a transition, max-height, one second, ease. So let's test
all this in the browser. I'm going to File, Real Time Preview. I'm going
to open up Google Chrome. Okay, in the browser I'm going to mouse over
my navigation tabs, and that looks very nice. So this will include this video
of how to create a drop-down menu.
