HTML & CSS : Creating a dropdown navigation menu

In this tutorial you will learn to create your very own dropdown navigation menu using just HTML & CSS.

Check out a written version of this dropdown navigation menu on JSFiddle: http://jsfiddle.net/mjdwebdesign/KsAZ8/

Thanks for watching - I hope this helps.

---

Closed Caption:

hi in this tutorial I'm going to be
going through how to create a navigation
bar with drop-down items for example
website might have a navigation bar
where you have a home link about us
contact us more information for example
and you might want that more information
and to have extra links
so what you want to create a drop down
menu that will when when the user hovers
over this is going to reveal more
options and more links that they can go
to so to start we're going to create a
folder which I have already done and
inside this folder all you're gonna need
is three files and arrow . PNG this is
going to specify which of our links on
the navigation bar are going to be able
to be covered over and
it revealed more items and we're going
to need a dot HTML file on a CSS file
and to create these files you can use
any text editor
i am using komodo Edit eight because i
am currently using my linux on my laptop
so let's go straight into this
you are going to need a basic knowledge
of HTML and CSS for this tutorial
however i am putting up new videos soon
that are going to go through basic a
Chanel basic CSS so be sure to check
those out when they come out
so we're going to start by actually
going into these styles and just
starting off some code on our body tag
and in this i'm just going to put the
pudding as 0 margin:0 and I always like
to do overflow
why scroll and i'll explain another
video in the future
so let's let's edit what the pages look
like so let's make the font family
Ariel for this and font size talking
about 18 p PX nice and big so we can see
it but not too big so the first thing
we're going to want to do is actually
create some give IDs so we're going to
create a div ID
i'm going to call this one now I see
you're going to be on main
oops sorry it's gonna be our main this
is going to cut contain the list and all
the links we need and also the designer
going to for going for is going to
require us to have a div ID now
rapper now basically this is going to be
enough is going to be a style ongoing
for hunger for a dark theme so I'm going
to have a black bar going across the
whole website and this now
rap is going to fit the the content of
the now in the middle of the website
so once once we've done that we'll start
reading list so you I the ul's right to
create a list and that's as a list items
which is a lie let's add some links to
them I'm going to have home in a typical
website link so let's have that many
will have very little about us contact
us and we'll have social as well as we
can answer them
so when so we're going to have these is
no links the home about us and contact
us as normal links and the social you
can be a drop down menu that will reveal
links to youtube twitter and facebook
so now let's start styling this so we're
going to our back into our air style
sheet and we're going to hashtag and
we're going to time enough and in this
enough
we're going to put a background color to
do and 22 is a dark gray color as you
see and that's all we need to put that
on the number upper this is going to
send her our love content so we're gonna
have a width of 960 X that's safe for
most monitors
a margin of zero auto and a
text-align:left ok so that's going to
Center the content is in this enough
let's let's have a look let's preview
this let's go back to here and just open
i'm going to be using google chrome you
can use whatever browser you like this
will work in Opera google chrome firefox
and it's one more
what is it google chrome firefox opera
what's the other one i use i have not
forgotten but it does work in all the
main browser is all I've missed a vital
bit of code which is the link to the
style sheet so we need to put link hrs
I'm going to do it's cool i've called my
styles . CSS
and once again if you if you don't know
any of this basic CSS and you can go
ahead and learn yourself or you can wait
until my videos come out explaining all
this kind of stuff
so let's try this again there we go
so as you can see story pretty at the
moment at all it's just closer
ok
right
so now
second
just do something
okay it's working fine
it might be better showing you like this
if I pull the browser out as far as
possible
so you can she see that this here does
go all the way to the web web end and
this is in the middle
let's change those little night she went
to we'll get to that
so now we want to do is start editing no
styling the list items so we're gonna
put now if you well as our thing that
style . list style type as non-cutting
of 0 and a margin of 0
and that is oh I'm also going to put oh
sorry
oh dear a position relative
this is going to be helpful for the
future
let's go back to this and you can see
this is we've now lost the styling the
bullet points and it's now at the top
the website or webpage so now let's do
now
UL li and this is going to be
display:inline-block and that's all we
need for the ful
we're going to be enough UL li a:hover
now unfortunately the method I use you
cannot have the link so that when you
hover over them they change color for
the drop-down menus
because if we were to do that the let's
just refresh actually because now we can
show what the display inline in blood
inline-block did sorry about that
basically if we were to create a link
that change : hover on the drop down
menu you would hover over it move down
your menu and this this link here would
change color back to the original one is
what it would be hard anymore so but
that does not not the same for the
background so let's get back to our code
and in here we're going to put a
background color of 33 three which is a
slightly lighter gray than you two
that'll do for now i'll show you what i
mean about the changing club link so
let's put UL li a
and i'm just going to put a con visited
that's what I know we do and also just
going to go ahead and put the a hover as
well
so here we are going to put we have a
color of CC which is a light library
we're going to have a we're going to put
the nav the at UL li link as
display:block
and basically what it does is make the
link cover the whole area of the Li
so now instead of putting the padding
that we're going to have on the LI we're
going to get on the go but it's 15 PX
for this
we don't have many links are going
across the page so basically this is
going to create something like this
as you can see we now this type of thing
here
it's going well
now I don't like coming the underline
so let's change that to text decoration
as not as you can see this happens
so
and that's this you don't have to do
anything but just to make sure i know we
just put oh dear oh dear is going wrong
I don't we put just color the same color
and text decoration on just to make sure
that it doesn't she do it
ok so now it's just slap
right so
let's add let's change this around a
little bit
basically if we go across it if we
scroll down you can see that my cursor
changes so to the default set of the
pointer
this is because we need to change some
of the haitian out we need to get rid of
these beginning Li tags
and move them so they're here
you have beginning oh dear
beginning Li tags here i'm just going to
copy link so it doesn't automatically do
you want to do that
so it's not so you have a lie and your
link then
and oh I an li enter then you have your
link then
and well I start a lie and and it goes
on like that
I don't do it to the last one obviously
so let's see what that looks like now we
saved it as you can see now that that
change has stopped
ok so now let's add our dry are many are
John . sorry I would drop down menu is
going to go after this link
so in between the link anywhere here
so images in between the link end of the
link and the end of the LI gonna press
ENTER and so again i'm going to start
another list
ally I'm going to put what we said
before which was
youtube
let's just copies make a little bit
easier when have--what have-- Twitter
and Facebook
let's check that out so now as you can
see it's it's it's you can note you can
notice that it's in the structure are a
drop down menu as you can see here
you've got the social and then drop down
and you got all these links but you know
we still don't have this when you hover
over when you know at the beginning it's
not that you can't see and then when you
hover over it reveals now we're going to
create that right now is going to style
she again and in here we're gonna start
a new one we're going to have UL li
a:hover you well i'm going to put
display:block
and what this is going to do is when you
hear we're telling it that when we hover
over the the first UL li so this is ul a
lot when we hover over one of these
we want something to happen to the next
UL that ul ul ul ul and this is going to
come in handy in the future when we put
now
ul ul we're going to display of not
and then this is where that position
comes in we're going to put a position
absolute so now this happens
as you can see
we now have a
state
where we can not see it and then we see
when we hover over
so that's what that does basically we
have the ul ul as display not so it
doesn't display first of all and then we
have this bit of code which tells it
that when we want when we hover over the
UL li
we want the ul ul to do something which
is display
so now let's go on to the styling of the
ul ul Li and we're going to put a
display of block because we don't want
to be inline block anymore because we
don't want this
this kind of thing you might want this
for your website but I for having them
like this
as you can see you know it's currently
at it currently has no background let's
put background on it
let's go to hear i'm going to type in
background the ul ul we're gonna go time
background color I'm going to have mine
the same as the hover state of the UL li
because then it looks like this
you got something like this so we will
you know our drop-down menu is basically
create a drop down menu but i'm going to
go through a few things you just to
improve it
one of the first things that we're going
to do is to improve this is going to go
now
ul UL li a ok we're going to obviously I
it doesn't really need to change we're
just gonna have it the same as the top
we can get rid of that and the knife ul
UL li a:hover
I'm gonna make this a color of the night
this is like a light like this blue and
it looks great against dark backgrounds
so you get like the dark grey background
so you get this
it's like that
another styling tip that I like to do is
actually go to the UL i'm going to add a
border of about 5 PX solid i'm going to
make it the same color as the and you
know the original navigation but with
you - I'm gonna refresh this and now
we're gonna get something like this
as you can see it's slightly ruined now
hear this and what this can be changed
its going to look good
we're going to do is going to do border
top as zero this is going to get rid of
that border that we have at the top but
now as you can see this border here is
cutting off
it does it doesn't look very nice so the
thing we do here is very easy just type
in margin
- left -
whatever your border it with is 2-5
person going to minus x 5 picks and now
you get this
so now you have this drop-down menu that
has like a border around it which is the
same color as the original navigation
so now it's got like a container
so another thing I like to do is also
just probably men with this something
you don't have to do of maybe i'm just
going to run them up to a new pic so you
get this
so that because sometimes you might have
quite long links and when this goes
bigger than the actual drop down menu
looks a bit silly
like for example if I were to change
this social to this is a very long link
and it shouldn't be like this spell
shouldn't wrong
it's going to look like that and it
looks a bit silly when it and this is a
giant and this is small so keep in mind
we probably want your drop-down menu to
be longer than the initial link your
drop-down drop down is coming from
so like that now i'm actually going to
use the same place here and do an image
I'm gonna add an image on my image is
arrow . PNG and as you can see this
happens now
it doesn't look very good as it's not
centered it's a bit too close to the
social or going to edit that now we're
going to go into back up to our now if
UL li we're going to put it here or here
so now UL li an image and here going to
put vertical line as middle and then
we're also going to add a padding left
let's just go with 10 PX so it goes away
from that social science as you can see
it's just move so let's was actually
duplicate this window and less
let's compare it so if we take away this
bit of code save it
go on to this
as you can see it's gone from this to
this with that little bit those two
lines of code
now that's like this probably don't need
as much padding on the left maybe we can
change that 25 let's try it once we put
that code back in 25
yeah that's better i refresh it yeah
that's much better
now you get this so you know this is a a
lot of people in find it hard to create
this drop-down menu but when i first was
learning I i like to look at the code on
example website think all what
there's no we're going to learn that but
it's in stages it's actually very simple
when you look at it though it's just
it's just a lot of code and i'm sure
it's intimidating to beginner web
developers and so I really hope this
tutorial helped you
no comment down below your feedback
why didn't write what I did wrong what
can improve on out
appreciate it very much and like is also
very appreciated and if you would like
to see more videos please subscribe to
my channel again I would really
appreciate that
thanks for watching I hope this helped
and i will see you in the next video