Dreamweaver Cs 6 Tutorial : Pure Css Drop down Menu

Click this link to watch an Improved remake with animation added as well.. http://youtu.be/Qd0iTLj_7qw

http://qualitylessons.net
Dreamweaver Cs 5 Tutorial : Pure Css Drop down Menu
Mohit Manuja
Trainer at Mumbai

---

Closed Caption:

howdy chance my name's Martin guys today
I'm going to show you how to make a pure
CSS dropdown menu now I already done you
know a couple of tutorials on up your
CSS dropdown menu back later on i
decided to make certain changes simply
find it a little bit and I've come up
but another version of the drop-down
menu ways
okay before I actually explain how this
was done let me show you a preview
became alive you guys can actually see
that as a whore each of the menu items
ok for simplicity everything has been
called home and every you know every
children item has been collecting one
although I'm sure you understand this is
just a test menu
actually this could be home this could
be about this could be services this
would be contact and obviously i don't
know one will be replaced by an actual
link that will happen when it's a real
website is just a test menu tonight I'm
gonna let that we get this thing we're
picking whatever you just see all right
in a separate different file and i'll
take you from the very beginning how
this was actually done let me see if I
on the new guys let me say that the
layout that I want to is none let me go
over the simple doctype the latest crop
diversity modified let me hit the create
button
oh let me see the file that's the first
thing that I want to do
let's save let's give it a name in a
while right
cool let me get a title as well about
right and let me go to the split to you
guys and let's start from the very
beginning
ok first things first let me insert them
so inserting objects dipped I let me go
to the ID and mighty feel and give it a
name
let me say that one click on the new CSS
rule button
ok and the definition rule definition is
getting able to save itself in this
document only not earning external style
sheet so it's an intern and better do
guys let me say okay let me go to the
box category let me go to the with let
me get a bit of a 608 I've already done
my calculations right let me go to the
background a bit of a background color
of 20 kill and let me go to the bakbox
category and let's say we want to
marginal 20 pixels on around let me say
ok and ok once again and this is where
i'll be placing my mova all right after
which guy is let me click out shareware
you see the unordered list i can write
and then let me drop an anchor die a
blanket I and then the href attribute
i'm going to make it a link now let's
say dot HTML although i don't have
hemorrhoids team already
okay this is just a test when you guys
and let me close it up
let me give it a title of home and close
the anchor tag up and let's see how this
actually affects things ok this is how
things look like right now
cool ok
let me hit enter a few times let me
extend this a little bit right so there
is
let's see what exactly do we have we
have the opening and the closing UL tags
within the opening closing death
ok inside which we have the LI attack
opening and closing a lifetime and
sandwiched in between we have the anti
make it now i'm going to do is I'm going
to create and nested you are typing in
the LI time light that's opening you
well which means that i should have a
closing well as well
ok so that's a nasty well tag which also
means that i'll be having nested Li tags
as well so yes I opening and Ally
closing and in between let's have a few
anchor text so if rancor its refractive
you guys pointing to let's say link one
that's a suitable in guys doesn't exist
but just for the sake of this tutorial
link 1 dot HTML and let me close it up
let me say link one and you know close
the anchored up the link type up and
then guys what I'm going to do is I'm
going to copy line number two NT I want
to paste it three more times one two out
of three out you okay i want to change
link 12 link to link 3 let's link
without you
cool let's see the result ok I made a
mistake somewhere looking just deduct
back
we got out I identified with the mistake
is since this is the opening UL tag i
should close it down chairs which would
be like this right and everything is
just fine
perfect ok guys next one to do is in the
cold area i'm going to click out here in
line number 17 then click on the +
button to create a new CSS rule this
compound would be targeting pound sign
dev one you were so basically all you
elements within the pound sign Devon one
ID selector and the rule will be an
internal embedded rule let me say okay
alright let me define it and let me go
to the box category with one the padding
to be zero imagine 20 as well at the
same time let me go to this category
that is the list type of man let me say
okay and guys you can see how does this
actually affect the minibar
cool next guy is what i'm going to do is
I'm going to click here in line number
23 we have a lot opening a tagline click
on the plus button and now this new
compound rude will be targeting a lie
within the world within the one-pound
everyone okay clearly says the selector
will apply your route to all elements
that are within neul elements that are
there any actual elements with I detail
one and it's getting save himself in
this document only basically creating an
internal or in a better light let me say
okay and then we go to the box category
i want to set the flow to a left let me
see apply let's see what happens out
here at something very funny happened
nobody and let me go to positioning
category let me set the position to our
relative right let me say okay this time
don't worry guys everything we just fine
very soon I know it doesn't look like a
drop-down menu but look like one way so
okay next guys what I want to do is I'm
gonna talk i'm gonna click out here in
line number 27
maybe have the ankle at a time let me
click on the plus button the new
compound will be talking all and contact
with an alive than you will with Infante
signed up one and again it's an internal
and better tool and we say okay and this
is a probably the most one rule of them
all
it is the most important rule guys let
me go to boss catagory straightaway let
me define the width to be a hundred and
fifty the height to be let's say 30 ok
let me go to the blog category and set
the display to a block let me see apply
alright see whenever an element is a
block element guys it starts to want to
attend the height according to the
definition so guys you can actually see
out here the width and height are
getting honored
ok next guy is let me go to the
background I think about
uncle of let's say this one pound signs
you're 69 right since its welcome you
for large the link i need to change the
link color to white
let me see apply see what happens next
guys I need to set the underlying I need
to take the underlying so i need to set
the text decoration to none
let me see apply see what has happened
guys if I said the line height equal to
the height of the tab which was 30 will
see that will center itself that the
textual center itself vertically next
what I need to do is I need to send to
the pics horizontally as well I can do
that by going to the rock category and
setting the texture line to a setup
right guys you can see the text has
centered self horizontally as well as
vertically ok and things are looking
just the way I wanted
alright and yes I need to apply certain
borders out your guys let me go with let
me check these off and that's what is
the right that's what is the right
margin is concerned let me set it to
solid so sorry
solid 1px and on sign triple five I want
to set the left and right margins with
different shades that will give you an
effect of something which is you know
kind of a deep you know it's kind of
onkyo powerful effect that actually goes
in and that's what the left margin is
concerned left border is concerned looks
set to start it again 1px and upon sine
to pull mine right let me see a fly and
as well as I would want to give it a
bottom border not at all bored of grace
and
again solid 1px off triple five ok let
me say okay straight away and let me go
to the live you guys and guys have a
look out here
what separates one from the other is a
line and this line seems to be going in
0 are giving about 3d effect on Carrie
effect right this is exactly what i
wanted to do
okay so far so good no problems
right okay let me save things up next
guys what i'll do is i'll click where we
have the ok let's click baby online
number 46 baby have the anchor tag let
me click on the plus button and this
time let me create a rule for the anchor
type of the link time but with the whole
estate a pseudo element pseudo-class
guys it's a compound all internal or an
embedded rule let me say okay and i
would want in somebody house over the
link that the background color should
change to a pound sign 900 let me say
okay and let's see how this actually
affects things like ooh ok next guys
what I'm going to do is I'm going to
keep the cursor in my number 50 we have
the nested UL tag I'm not click on the
plus button this rule is going to target
their one ull like you're so you are
within our live within us within the one
right at the central guys a comp own
internal embedded well as well let me
say okay and this time let me go to the
positioning that agreement set the
position to the toe not relative I'm
sorry absolute and the moment he say
okay guys have a lookout share what has
happened
actually you see that the driver you
know the links dropping very nicely
billion below the main ally the children
are dropping below the main ally that's
very cool that's magical at the same
time I would want for perfect alignment
the placement from the top 231 pixels
I'll see apply once again
ok guys so although this may not show up
as a major difference to you with the
naked eye but actually keeping it the 31
from the top as the perfect thing to do
okay 30 pixels for the height of the day
1 pixel for the border
I've set the element absolute guys
within an other than a relative element
and then I can use the top right bottom
left replacements
ok let me say okay but only after a set
the visibility to a hidden let me say
okay and guys you can actually see that
everything is actually hidden itself but
only things will be all fine all cool
very soon next guy will need to do is I
need to click again baby let's say a
line number 54 let me click on the plus
button
ok
this time i would want the anchor tag
let me think
you will ally a rather let me cancel it
up an account here in line number 56 let
me click on the plus button right
mmm i need to shorten the room okay i
need to come out here we have the okay i
need to put a hard out here so basically
i'm targeting the nested you well tag as
long as allies in the hover state and
what I need to do is let me say okay I
need to say that I would want the
visibility to turn back again to make it
visible let me say okay alright so
basically guys what i've done is i have
set the visibility but only when the
main ally as Howard upon right so that's
that's looking cool wonderful and then
guys what I'm going to do is I'm going
to click out here in line number 59 way
we have the nested anchor tag
ok let me click on the plus button and
yeah so it's going to target everything
alive with a new world within alive when
you were the one along the central guys
let me say okay and i'm gonna say i
would want the border to be effective in
the way that I'm not about to define I
would the top border to be solid but
having one pixels the one pictures and
this time I want to be at to be a triple
9
ok but the bottom border i would want to
be a solid one
pixels but bounced identical five that's
how I would want it on time
triple five I'm sorry its hash to
profile let me say okay and you guys
have a look out here how it actually
affects things
okay perfect okay i'm actually using the
top and the bottom on the left and the
right borders only so that i can get a
special effect a line that actually
seems to go in okay at the divider the
border seems to go in a mild concave
effect a groove kind of a structure
ok so another i'm actually done guys I'm
going to do is please look out here
carefully i'm going to select everything
that is within the tips with an idea of
what everything leaving the devil part
okay i'm going to save controls see I'm
gonna hit enter twice i'm gonna c
control v and it twice
we could all be and twice control be
okay let's see how this actually affects
the things ok now that i've done it i
have the menu already guys okay not
every man us home and every link willing
to let see obviously guys you can go out
here you can change the link to to
whatever you would like you could put
into a home or rub anything Lee it could
be it could be a portfolio daughter HTML
of whatever just portfolio or services
or whatever right
even the links you see these are pseudo
links and these pseudo names you
obviously--you I'm just taking and
taking it since it's a tested so this
menu i'm expecting you to change that
also guys I'll see the drop-down which
is up to a level one it has fallen so of
course you can make the links five or
six or even two or three
it's very simple guys for example if you
would want to increase the number of
Link's let's able to line number 76
control C and ctrl we twice
ok this would have the result of you
know increasing the number of links or I
could simply you know delete certain
ally items like this and
I beg your pardon and as you can see you
guys
the number of Link's actually decrease
right okay and you can come out here and
you can change the home directory mailto
services HTML or about donation or
whatever Nikki you can give it a title
you can change the target although it's
best to leave with blank you know not
put anything out here or you can set to
underscore self which is the same thing
ok you can even set it to underscore
glance with that it opens up new in a
new blank page but I don't know why
would somebody want to do that but just
in case
all right so guys that concludes the
tutorial on a pure CSS dropdown menu i
hope you liked it i hope to see where
he's from here with the guys about peace