CSS Horizontal Drop Down Menu - 1 of 2

Host Unlimited Websites For $3.88 ! http://bit.ly/Powweb-Hosting-Sale
Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, $150 google adwords, E-Commerce Included, Dreamweaver Ready,
30 Day money back guarantee

This is part 1 for part 2 please follow this link:

http://www.youtube.com/watch?v=vW4IzAjbqCU

In this tutorial by James from http://www.dreamweavertutorial.co.uk we will be create a menu, a horizontal css dropdown menu to be exact.
The css menu will be complete with css hover effects whereby the drop down menu is visible only when a user hovers over the main link on the horizontal menu.

Drop down menus are derived from the original sucker fish JavaScript dropdown menus. The drop down menu in css is exactly the same but will load much quicker in a web browser which is not only good for your website visitors but is also good for your Google page rank.
The menu requires some html mark up but is easy to make with good direction (from me!)

***** IMPORTANT ******

Paste this code into your css file for IE7

/* IE7 Display Fix */

#navMenu #holder ul li {

display: inline;

}

********************************



Google + gplus.to/dreamweavertutorial

Follow me on Twitter:
http://www.twitter.com/dreamweaverman
My RSS feed for Dreamweaver Tutorials:
http://www.dreamweavertutorial.co.uk/feed.xml

---

Closed Caption:

hey everyone it's james from during with
cereal . IDK and today we're gonna be
making a pure CSS dropdown menu as a top
level navigation hot in blue
it has a different harbor link effects
when it all blows over the links and the
text changes color and most importantly
it holds the blue hover effect while the
mouse scroll down the rest of the page
links as i said before this is pure CSS
there's no javascript this will load
instantly into your web browser with out
any delay
there's also no image is being used even
all of the effects being used or just
background colors
hex decimal colors and a text effects
using CSS take shadows
ok so back in Dreamweaver going to
create a blank HTML document and split
the body tags and with the crate and all
income Cynthia and it will be divided II
and record it rapper
I'm going to split that in the middle
and we're going to put clothes in
comments it's the end of the rapid give
ok the next thing I'm going to do is
create a number dave and this is going
to hold the menu inside of it so i'm
going to create a div with an ID on the
quick nav menu and notice the capital m
and that menu there and i'm also going
to split in the middle and I'm create a
closing comment says the end often at
menu div
okay so far so good now the horizontal
menu itself is going to see inside of an
unordered least and inside of the
unordered list we're also going to
create a nested unordered list as well
and that will create the drop-down
effects on the create an opening and
closing UL tag and close it with an end
main UL comment ok so i'm going to
create an opening and closing list item
tag and inside of that we're going to
nestle where other unordered list which
contains the invisible drop down menu
which when we hover over it will show up
now inside the list item as well i'm
going to put the main top level link
this is going to be the link that's on
show right so i'm going to create an
opening and closing link tag so ba hey
Trev equals
and i am going to close that off and
inside that i'm going to make it no link
for now so I'm going to just put in a
hash and i'm going to type the name of
the link so this first think will be
products you might want to call it home
you can call it whatever you want to
this is the what is going to show up on
the horizontal menu
ok we're not going to create the items
that will appear on the drop down menu
so we create the products link which is
that on our main horizontal navigation
bar now we're going to do is next an
unordered list inside the police tag
notice to closing this tag
we were inside of that ok so i'm going
to call this end in a UL for the inside
next day the unordered list and
increasing list items for that and
inside each list item
i'm going to create an H reptak and I'm
going to put a name of the link that i
want it to be so i'm good oxygen created
as a no link with the hash there and I'm
going to put a link item
ok now we're going to do to say time is
I am going to copy that link so I'm the
highlighted on the press ctrl c and in
on the press ctrl be and copy and paste
the link about four or five more times
on press ctrl be inter control be and to
control the enter the case if
underground press refresh or click
inside the design view you see that
little list items appear to link items
appear just below that product section
of the horizontal menu
ok so we're doing quite well here so far
so good
so this is what we created an unordered
list we put a main horizontal list item
and inside of that list item we've had
nestled and run or another unordered
list
ok so this creates some CSS rules now
i'm going to highlight the nav menu and
create the new CSS rule in the defining
a new style sheet and i'm just going to
say that into a CSS folder I created
earlier
so you can sew down into your CSS folder
it's too unquote drop down and press
save
ok now in the press ok we'll go in hand
coast so I'm going to go and clean just
to the right of the source code there
into the CSS file we just created
ok so I'm going to start on that menu
and what we need students take out all
of the default margins and padding so
i'm going to type in margin codon 0
panting : 0 and in nose with semi-colons
ok and now we've got the nav menu we
need to take the margins and padding out
the unordered list so that i can pound
that menu
ul and do exactly the same thing there
okay so now we've done that I'm going to
press refresh we can click inside design
view you see that all of the link light
and snapping suit just interline just
underneath the products menu and you can
still see the faint outline of the least
lights and bullets there so we need to
take the bullets and we'll do that now
so i'm gonna type in pound nav menu a
liar system the list items inside the
unordered list on the change the margins
a zero on the change the padding 20
ok it will take out the list are now so
list - style and it's like : nun and a
semicolon at the end and that will take
out the list items you do see that them
disappear there
ok the next thing I'm gonna do is I'm
going to float the menu to the left or
the list items to left on the top and
float coat on left and you see that they
will swing up into place there and the
next thing we're going to do is we're
going to say it to a position of
relative
so just type in position : and relative
semicolon and you'll see it puts a
little box around and just line them up
into place there
ok let's have a look at that inside of a
browser so i'm going to click looking
for firefox and you see that links have
been created and not quite how he wanted
to be yet but we'll sort out now will
create a few more rules
ok now the reason we created the list
items as and position relative is
because we're going to absolutely
position the links and we need to say
something - it's a buffer off so in this
case it will be the list items
now i'm going to adjust the links and
this is where it's all going to happen
on the type in pound nav menu
UL li a and we're going to align the
text to the centre
you see that it does that the other
items it that the below the products
they have also changed but we haven't
seen a width and height depth for it yet
so you'll see that they align center in
the end
now and stopping font family and we're
change it to comic sans serif and I'm
set the text decoration to none because
i want to take the underlying out from
the links we don't want that there it's
all okay so now we've done that we're
looking quite good now
ok so I'm going to adjust the height of
each link to 30 pixels in higher soon
just the width and a good size would be
a hundred and fifty pixels for a drop
down menu
so that's a high of 30 pixels a weight
450 pixels
ok some of the display block which is
what the reason we put in height and
width and you can see that it now takes
up a 30 pixels higher and a hundred
fifty pixels with each link so that
means you don't have to roll over all of
the text just to get a rollover effect
you can roll over anywhere within that
box
ok so I'm going to censor all of the
text as well inside the area so what's
up in line - higher code on 30 pixels
inside of the nav menu UL okay that
since it nicely there
okay I'm just gonna adjust the color of
the text links to black
so I'm typing color code on 400 so we go
on
ok so it's just have a look at that in
the browser now so I'm have a look and
check in safari this time
ok so we've done quite a bit to this
text so far on the link so we've taken
the least I lights and the bullet this
out we taking the underlines out we set
the display to block and we've also
change the font family
now let's set the functionality that
makes the drop down hover effects works
on the type in pound nav menu I'm going
to target the unordered list inside of
the unordered list this is the next at
least we're going to target and i'll
show you the source code we've got the
main unordered list there
ok and we're going to target the
unordered list which is inside of the
unordered list this is the message least
that's why we're type in
pound nav menu ul ul ok so the first
thing I'm going to do is I'm going to
set the positioning of the nested lists
the unordered list inside of the
unordered list to position of absolute
some type of position : absolute and
click refresh every click inside of
design view you see they ordered the
list items drop down below the products
list and that now we're going to type of
the visibility sort of invisibility :
and the set out to hidden because we
want to hide that unordered list so when
i press refresh now you see it
disappears
fantastic ok so all we've got now is the
the list item of products which is
visible on a set the top positions of 30
pixels which is the same height as the
links that we set in when we displayed
in block that's important right now we
need to create a hover effect which will
bring back that unordered list when we
roll over the products menu so that i
can pound nav menu
ull I : haha
UL sweetness adjust the harbor of the
unordered list inside the least item of
the unordered list
ok so it's a pseudo select so we're
gonna create there it seems a bit
confusing but just bear with me okay
we're going to talk to visibility and
we're going to change it to visible so
when we roll over the products menu
the menu is going to show up the list
items when using a sharp with a
visibility
ok so it's hard right now ok fantastic
it's looking really good it's all in
position is where we want it to be
ok so what we need to do is we can
create some more list items and which
will make up the rest of our horizontal
menu