Cascading Drop-down Navigation Menu with CSS (Part 1)

Use CSS to convert a nested unordered list into a multi-level, drop-down, cascading navigation menu.

Centered navigation bar
Demo File: http://www.sixminutessmarter.com/demofiles/webdev/cascading-menu-centered.html

Fixed header navigation at top of page.
Demo File: http://www.sixminutessmarter.com/demofiles/webdev/cascading-menu-fixed.html

Center the Nav Menu: https://www.youtube.com/watch?v=XRJq1DqYcPs

Block vs No-Block: http://www.ralphphillips.com/youtube/links.html

Position Absolute: http://www.youtube.com/watch?v=5S1PtC4wRAg

Z-index when Positioning: http://www.youtube.com/watch?v=WisFFeOsMIs

---

Closed Caption:

hey this is ralph and in this video i
want to create a horizontal navigation
menu using only styles so here's an
example of a little horizontal
navigation menu and it's got a cascading
so it's got dropped down choices and
also the active parent choice is
formatted with a slightly different
color so you keep track of that
so that's what we're going to create
here it's only jump over to my editor
and I've got a bunch of stuff on here
but it's going to make things too easy
for so let me just good hotel clear
everything out
ok start from a clean slate
save that course I'm gonna finish off my
style tag closing head tag and a body
tag
now I've definitely got a blank page if
i go back here and refresh
there we go so I've already got my
markup set up obviously for an html5
document got that type . type definition
title character encoding and also got a
metal author in there
I'm going to be creating style certainly
but i do need to set up my my list
i'm going to create a littlie notice
without do a little each one in here and
this is going to be of course my
navigation menu and my navigation menu
is going to be made up of an unordered
list
okay and let me go ahead and uniquely
identify it
there we go
and my unordered list is going to have a
series of list items and of course each
of these is going to be a hyperlink
I'm just going to do a little dummy link
oops there we go
let's see
hyperlink one
there we go
and I will set up hyperlinks two three
four and five
so this is my parent navigation menu and
this will be you know certainly what a
person sees right when they go to the
page
some of these options i want to have
some sub menus and things like that so
i'll just pick on my second one right
here so I'm gonna go to my second list
item I for my hyperlink to and I've got
my the insertion point right there
inside of the list item tag and i'm just
going to press my Enter key
several times to give me room to work so
within this list item
I'm gonna have another unordered list
and this is going to be let me do a
class here
I'll do class equals sub 1 because this
is going to be a submenu one and i'll
put in my closing unordered list so just
so that we're really clear this submenu
this unordered list is completely inside
of a list item for the parent hyperlink
or the parent list item so I got that
taken care of and then really it's just
a matter of making some more links i'm
going to copy one of these taste it and
this will be hyperlink 2.1 and repeat
that a few times
2.2 and 2.3
there we go so there's our sub 1
and I'm gonna kind of repeat this
process so i'm going to copy
notice where I'm copying i'm copying
basically everything that's within that
list item for my hyperlink to going to
copy that and I'll stick it down here
for paste it in here
so now I've got 4.1 4.2 4.3 and these
are all this is another submenu
ok and I want to go a little bit deeper
here i'll do a submenu 44.3 also so let
me go ahead and paste right in there and
let me do some indentation just so it
stands out to us
there we go i know this is looking a
little bit weird
this is going to be Class sub 2 and this
is going to be four four four and this
is going to be 4 3 143 2433 enough
I feel like I've lost a lot of people
here this is just really setting up this
HTML it's a complicated looking menu but
basically within my list items i now
have complete one word list to show this
submenu and you can actually see this
right away in fact this is probably a
good way to go
you know you set up your men you first
get all the HTML down and what you with
what you want
and now when i go to my browser I'm
going to see that I've really got a
nested series of unordered list so i can
see my parent list hyperlink one two
three and four and then there's five
over there and then I have a sub list
for hyperlink to with 2.1 2.2 and 2.3 i
have a sub list with hyperlink for 4.1
4.2 4.3 and I've got a sub list on 4.3
to these all right so basically this is
how this is a good nested list so if you
ever need to do a
a series of nested list that's the
technique for so basically you're just
putting complete unordered lists within
the list item of the parent
so really the HTML is done here so I've
got just these dummy hyperlinks for my
list so i'm going to scroll up and start
working on the styles and that's where
the real work is going to take place
first style is going to be a reset rule
love doing the reset rules
ok and i'm also going to have a rule for
my body here these are you know the
reset rule i think is an important tool
it sets all elements to 0 margin:0
padding:0 so it's a nice way to have
consistently out amongst different
browsers that the body is just going to
be aesthetics
I'll do on font family verdanna
background color
ABC I'm a little padding on here too and
i do have a headline one
some of the format that center that dark
blue and a little margin bottom
ok so let's see what we've got here
alright so this is my my new my new and
improved list
notice i lost my nesting so to speak
kind of i lost the indentation because I
set margins and padding is 20
this isn't broken and whenever you're
making pages like this
you just gotta trust in yourself and you
know I know it was working before I know
it looks different now but I know
exactly why it looks different it looks
different because I set all margins and
padding 20 in effect i got rid of all
those default indentations but i still
know that I haven't modified my HTML so
I know this is a good well written
unordered list or nested list
so I'm okay with that and now it's it's
time to start putting the actual menu
together and for some for most of these
rules I really doesn't matter
the sequence that we go in so i'm just
going to kind of start to knock some
things out one by one
see there's my editor so I'm gonna start
working on my list area
in fact
there we go just do a little bit of them
formatting so now the rules for my
navigation menu are going to start up
right here and the thirst first thing
I'm gonna do is I'll just say my own
word list
nav menu list style type nine and i'm
going to show you each kind of step of
the way here so i save this head back
over firefox and refresh
I've lost the bullets for most of those
things ok but i really do even more than
that
so in addition to my unordered list
nav menu I could do pretty much any
unordered list a couple ways i can write
that I could do this all honored lists
list I'll tighten on all those bullets
are gone
okay if I happen to have some other
unordered list on my page though that
could be problematic
so i might do unordered list nav menu ,
unordered list . sub 1 , unordered list
. sub 2 and this will take care of my
main nav menu
my sub 1 unordered list and my sub 2
unordered list remember these are .
because i'm using classes as opposed to
an ID
so if i save this refresh still no
bullets there
ok so next thing i want to do is start
to create this structure how this how
this page looks
for this menu looks excuse me alright so
i'm going to go ahead and start to
manipulate the list items of my
unordered list unordered list
nav menu list items and just so that we
can see things i'm going to put a
temporary outline one picks solid red
ok so I'm going to end up taking that
off before we're all done but I like
putting those outlines our borders on
elements because it makes it really easy
to start to visualize things and you can
see where some of the more thicker
looking because i'm kind of doubling up
when I have a sub list but that's going
to that is going to make our lives a
little bit easier
so now to get those list item
side-by-side well first I need to set
their with i'm going to do a hundred and
twenty five pixels for their with and
i'm going to do text-align:center center
the text within them
probably not too critical though and
let's see i'm also going to do
position:relative this is a really
important step here so
position:relative is going to allow us
to position our sub menus
absolutely within a list item so this
position relative is probably one of the
most important steps and let's see I law
also do a float left this is going to
get my list items side by side
ok and let's see how that's looking
there we go things are going pretty well
here already getting that side by side
look and let me go ahead and also put a
little margin here and just do it right
there we go so I just put a little
margin you probably notice that it just
jumped a little bit but it is a little
bit wider there
this would stand out a little bit more
or less so fight instead of I used
outline in fact one over the border
there we go now you can actually see the
spaces in between my list items when I
throw that border on there so that's
where that's coming into play
ok so little different in border and
outline so outline is outside of that
margin space
alright so that's kind of good to know
so now I've got my in remember don't
worry about how messy this might look in
in the in the middle of the surgery so
to speak
I'm really just looking all right i got
my menu items up there ok I'm happy with
that
next thing I want to do is I want to
manipulate the anchor tags and whenever
you're making navigation menus out of
unordered list you definitely don't want
to manipulate those anchor tags so let's
jump back over here
unordered list and a Half Men you anchor
text so
oops there we go and let's say I'm going
to do a text-decoration:none that gets
rid of the underlining and i'm going to
display block that converts my inline
element anchor tags into block elements
and I like doing that because now my
anchor tags are going to be easy to
manipulate I can manipulate their within
their height and it makes my list items
behave more like buttons
check this out real quick let me just go
ahead and no actually now let me set the
width and height - so you can really see
it
I'm going to do with I'll do 1 25 PX
I'm going to a height of 25 pixels let
me stop there for a second check this
out now before i hit refresh just kind
of make a mental note of this
if I want to activate my hyperlink three
for instance I have to put my pointer
literally on the text
ok and I don't want to do that I want
the entire button shape to be a
hyperlink so now when i refresh
watch this I can put my cursor anywhere
in
that little button and now it is a
hyperlink
ok so what allowed me to make that
rectangle button hyperlink was basically
making my anchor tags and a block
elements and then setting there within
the height to the shape that I wanted
that rectangle to be so really important
step and improve the usability of your
own navigation menu
alright so I've got that and i'm going
to do a little bit of line height of 25
pixels and basically that's going to
give me a kind of an illusion of
vertical centering so am i Texas kind of
vertically centered
if I had multiple lines of text that
would be problematic but since I've only
got one line of text and each button
that's fine so I've got that little
illusion of vertical centering there and
actually that's pretty good so how to
change the background color though and i
will put a border on their kind of a
light gray and have a little border
radius let's see i'm using the this is
due border radius and five pixels let's
see how that's looking
ok kind of ignore those red borders for
now ok so ignore those red borders and
in fact I could always jump back here
instead of border i could change this
over to outline if I spell it right
there is outline their egos it's a
little bit clearer looking and if those
weren't there at all
i'm going to put it back to later so i
want you to see it on their area so this
is how my navigation menu was looking
all right
see i see him about 15 minutes into this
video I think we're going to do is I'm
going to go ahead and stop it here and
then I'm gonna pick this up in a second
video
ok so a second part so see in a minute