CSS Horizontal Drop Down Menu - 2 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


****************************************************************************
To Center the menu:

You will need to work out the total width of your menu. If you followed the tutorial exactly then each menu item is 150px (including the borders).

1. Add up the number of menu items to get your menu width and set the width in the css on the div: #navMenu

2. you will now set auto margins like this:

#navMenu {

width: 750px; ------ example width
margin: 0 auto;

}

this will remove any vertical space and tell the navMenu div to reside in the middle of whatever div that it is sitting in.

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


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

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

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;

}

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

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

---

Closed Caption:

okay so I'm gonna go back into the
source code and save ourselves a bit of
time we can do is we can copy all of the
the HTML markup we just made there and
we can paste it on a highlight the whole
thing
press ctrl-c and then i'm going to copy
and paste about five times below so
ctrl-v to paste it or you can right
click on your mouse and paste in that
way
ok so just press refresh and you can see
that I've got some more items there and
all we need to do is change the link
items two different things from products
obviously let's check the effect in a
browser and you can see that it rolls
over anyway it will holla just fine
networks really good
okay so we know that it's working and
all of the hover effects will show on
command
ok so let's go back into the CSS Styles
now and what we're going to do is style
the base color for the horizontal menu
and list items so I'm going to pound out
menu li hand on white background kollam
i'm gonna say it's a pound 999 a
semicolon the end
ok so that's going to start not only the
horizontal menu but all of the hover
list items as well so it's pretty that
in safari and they go to get a base
color in place and no rover effects yet
but we're going to put those in in just
a second we're going to put in a board
are two separate all of the list items
and horizontal menu too
ok so I'm going to the pound menu UL li
a tag so we're going to adjust the link
tags and I want the color of the text of
the link to be white and most going to
set bordercolor myself border
kool on one pic solid and we're gonna
make here black for the time being
now we will change this border to Wyatt
but i want to show you something Kim the
styling because we added 1 pixel border
they'll add the border on the outside of
the links so the position will be
slightly out when we do to hover effect
so if we just check that in the browser
now okay so you'll see that the board
has been attached to all of the link
lightens now and around that display
block property where it's a hundred and
fifty pixels and 30 pixels in height now
you see it slightly out in the corners
there by a pics or two
so what we do is we can go back into the
CSS and where we set the absolute
position to a top of 30 pixels we can
either set out to 32 or 31 pixels and go
for 32 pixels because there's obviously
a pixel on the top and pics on the
bottom and preview that in the browser
as well as you can see there is fix the
problem now is now been adjusted and
it's all sitting quite nicely so better
in mind next time you add a border to
anything always put a board on the
outside age so you need to account flat
by one or two pixels
ok so i'm just going a bit draw a big
comment line so some for / star star /a
and we're going to put in a nav menu li
harbor and we're actually going to style
the hover effects now so this is a
pseudo Slater i'm gonna change the
background color and press background
kool on pound 09 F and i'll give us a
blue color so this is the main
horizontal menu the hover effect that
takes place on that ok so you'll see in
safari that it's gonna add the hover
effect with to hold and it also change
order link items to a blue heart as well
okay but i would like the horizontal
menu to stay blue and I want the link
light seems to be a different color when
we roll over the links so we'll make
that change in the CSS now
ok we're actually going to write quite a
long pseudo selector now so here we go
it's pound nav menu UL li ER colon hava
space UL li a codon harbor
ok now is choir quite a mouthful there
but this is actually going to change the
harbor effects of those links and keep
the other hover effects in place since
I've been background colum and pound ccc
for the background color of the hover
effect and the change the text color to
black
ok so let's preview that in safari now
and it was quite a long select so we
made their base well worth doing it and
experimenting because now we've got a
rollover effects that stays blonde haha
and then changes color for the link item
so hover effect is a lighter gray as
opposed to the same blue that you had
with the main origins or list item
okay since one more effects want to do
and that's to change the harbor color
for the links in the main horizontal
where it says products as you can see
horizontally along the list now
ok now i'm going to set an easy one
which is pound nav menu I cold on harbor
so it's a pseudo Slater for the harbor
of the link and I'm change the color to
black so it will be black as we hover
over and in as we go down to list items
they it will change back to white so
it's pretty tight in safari now
okay so here's the link showing up as
wire or press refresh and ego you shows
up as a black color but when we roll
over onto the list items it changes back
to wire carefulness really good effect
ok let's go back into the CSS styles and
what we do is going to change the board
arts who whites now it was black but
we're going to change it so why so pound
nav menu ull I a change that two-pound
FF that's good
ok and more than a text shadow as well
so going to just make the text jump out
a little bit on the links so it's like
text a shadow colon and set the text
shadow 2 1 pixel one pixel on the
horizontal and vertical one pixel blur
radius and the color of black
ok so just previewed in safari click to
save the changes and there you go
really nice-looking menu some really
good hover effects their different hover
effects as well different color changes
looks really really good ok now we
finished menu and what we need to do is
earlier on we floated the list item to
the left
well we need to contain the flow so if i
click on the DVD rapper you see that the
element is there the rapid is there its
collapse we need to contain the floats
that wraps around the whole of the nav
menu so we go down to the bottom and
just pour the end of the nav menu div
i'm going to create a class b our class
equals and i'm gonna call it clear float
with a capital F ok now I'm going to go
back into the CSS and the great class
for the clear float glass and so I .
clear float and I'm going to say it to
clear both so it's gonna clear on the
left and it's going to clear on the
right also one there are also going to
set the margins 20 and i'm also gonna
set the padding attributes 20 as well
and we'll just click refresh and then
we'll click back on the rapid Eve and
you'll see that in now encompasses the
whole of the nav menu
ok that's tutorial finished and i'm
going to do is change all of the names
on horizontal menu now at different
least menu items and in all previous
back in the browser so I'm just going to
pause it while I do that
okay so here's the finished drop-down
menu smooth scrolling quick loading
great effects pure CSS rollovers okay i
hope you enjoyed this tutorial we
exchanged some dreamweaver tutorial .
kody kay and i'll see you next time