Creating a CSS Drop Down Menu in Dreamweaver

In this video I’m gonna show you how to create a css menu bar in Dreamweaver...

Download everything we made in this video (ZIP)

Hey everybody, Greg Davis here. In this video I'm gonna show you how to create this css menu bar in Dreamweaver.

You can see that this menu bar has rollover effects using different background images, and it also has drop down menus.

And this is a css menu bar, so we are not gonna use any spry elements, no javascript, nothing like that. All we are gonna use is html, and css. And yes, you can create a drop down menu with css, and I'm gonna show you how. It's pretty easy actually. And it's pretty good, too, because it's simple, it loads fast, no browser compatibility issues, it just works, and it's awesome.

So let's GO to Dreamweaver.

And let's take a look at setting this menu bar up. I have got a blank html page HERE.

First, we need a div tag to position our menu bar. So let's GO to the Insert panel, Common tab, and SELECT Insert Div tag.

I'm gonna INSERT div tag "At insertion point" where my cursor is.

And I'm gonna APPLY a brand new class style to it. I just NAME it "navbar"

I CLICK New CSS Rule

It's gonna be a class style, called "navbar" there is a period in front of it, because it's gonna be a class style.

And I'm gonna DEFINE the rule in a New CSS style sheet file.

I HIT Ok.

And Dreamweaver is asking me where to save the css style sheet file

I'm gonna save it inside the Site Root, and the file NAME will BE "navigation"

I CLICK Save.

And let's style our div tag. The font will BE: Arial, 16px.

Let's GO to Box, and the box size will BE 400px wide, and 24px tall.

Let's give it some padding, NOT same for all: just a top:6px,

And let's give it some margin, NOT same for all: Right:auto, and Left:auto, just to center it.

I HIT Ok, once again

And HERE is our div tag for our menu bar

I just DELETE this text

And I TYPE IN "Menu 1"

Let's PUT it in an unordered list

And it looks like it's getting out of our div tag, but it's not. Don't panic. We're gonna style it in just a bit.

I HIT Enter, and I TYPE IN "Menu 2" – Enter – "Menu 3" – Enter – and "Menu 4"

You can call these whatever you want. I just named them real quick.

And now we have to link them

I SELECT the first one, and I just PUT a hash tag in the link for now.

Obviously, you will link them to your actual web pages, but you can do that later.

I SELECT the second one, and PUT a hash tag in the link. Third one, and a hash tag, fourth, hash tag.

Now, let's style these elements with css. I have got my cursor sitting inside of the link.

I CLICK New CSS Rule

I need a Compound selector

And I'm gonna style the ul tags, within the navbar: (.navbar ul)

I define the rule in the navigation.css file, I CLICK Ok

I GO to box, and I CHANGE its padding to 0, all the way around.

Also the margin, 0, all the way around.

I GO to list, and I SET the list-style-type to "none" to get rid of the bullets.

I CLICK Ok, and here we go.

My cursor is still sitting inside of the link tags.

I CLICK New CSS Rule, again.

I need a Compound selector.

And I'm gonna style the li tags, within the ul tags, within the navbar: (.navbar ul li).

I define the rule in the navigation.css file, I CLICK Ok.

I GO to box, and I DO a float:left, so my list items are gonna line up next to each other.

I CLICK Ok, and here we go.

I CLICK New CSS Rule, again.

Compound selector.

And I'm gonna style the link tags, within li ul and navbar: (.navbar ul li a).

I define the rule in the navigation.css file, I CLICK Ok.

Now the font-family, and font-size will be inherited from our parent container, which is the navbar div tag. We just styled it.

But here, I CHANGE the text-decoration to "none" so our links are not gonna be underlined.

And I also CHANGE the font-color to white (#fff).

I GO to box, and I'm GIVING it some padding of 5px, all the way around.

And I'm also GIVING it a right-margin of 3px,

I GO to border, and let's GIVE it a solid, 1px, blue (#069) border, all the way around.

I GO to background, and I CHANGE the background color to blue (#069), just so that we can see our menu bar here in Dreamweaver, but we are gonna have background images.

So let's GO over to Fireworks, and let's create our background images real quick.

I CREATE a New Fireworks Document

We are gonna create small images, so a 1000px wide, and 1000px tall canvas is more than enough. The canvas color will BE transparent. I CLICK Ok.

And HERE is our Fireworks document.

Let's GRAB our Rectangle tool.

And let's CREATE a Rectangle.

It's gonna BE 100px wide, and 26px tall.

I CHANGE its color to blue (#0099FF).

And let's APPLY some filters to it, like: Photoshop Live Effects.

I SELECT Gradient Overlay.

Opacity will BE: 25, and the Style will BE: Reflected.

It looks pretty good. I CLICK Ok.

I GET my Pointer tool.

I SELECT my rectangle, and I HOLD DOWN my alt key (or opt key on mac), and DRAG a copy over here.

I just MAKE one more copy

There you go. We just need to change their color.

This one will BE bright blue (#00FFFF), for hover links.

And this one will BE green (#00FF00), for current links.

Now, we just need to export these images. I GET my Pointer tool, I SELECT all of my rectangles.

And I DO a RIGHT,CLICK (or hold down your ctr key and click on the mac) and SELECT "Insert Rectangular Slice"

We need MULTIPLE slices, one for each one them.

And HERE they are.

I CHANGE their width to 1px, because these background images are gonna be repeated horizontally.

I CLICK my canvas to deselect my slices

And right HERE, I SELECT the first slice, which is THIS one, and I NAME it "bg_navbar"

I SELECT the next one, which is THIS, and I NAME it "bg_navbar_hover"

I SELECT the third one, and I NAME it "bg_navbar_current"

Good. I SELECT the first slice, I export it to PNG32 format.

I just RIGHT,CLICK on the slice (or ctr,click on the mac) and SELECT "Export selected slice"

I save it in the site root, and the file name is the slice name. I CLICK Save.

I SELECT my next slice, I export it to PNG32 format.

I RIGHT,CLICK on the slice, "Export selected slice"

CLICK Save.

I SELECT the third slice, PNG32 format.

I RIGHT,CLICK on the slice, "Export selected slice"

CLICK Save.

And I'm gonna SAVE my Fireworks document as well.

I save it in the site root, and the file name will BE "navigation" PNG, I CLICK Save.

And let's GO back to Dreamweaver.

And we can now BROWSE our background image for our links (bg_navbar).

I CLICK Ok, once again, and here we go!

Now, you won't be able to see the background image here, but it works!

I TURN Live View ON, and there it is!

I TURN Live View OFF.

And let's style our hover links.

I PUT my cursor in the link.

I CLICK New CSS Rule.

Compound selector.

And right after the link, I just TYPE in: a colon, hover, and a comma: .navbar ul li a:hover,

Now I SELECT it, PRESS ctr,c (or cmd,c on the mac)

And I PASTE it in again, and AGAIN.

I just DELETE the last comma.

And this is a comma separated compound selector, so the PROPERTIES will apply to all of these situations: The first one, the "hover" is when somebody hovers over the link.

The second one will BE: "active"

That is the hover link for visited links

And the third one will BE: "focus"

That is when somebody navigates by keyboard. We want the rollover effect to work in all of those situations.

I define the rule in the navigation.css file, I CLICK Ok.

I GO to background, and I BROWSE my background image, the hover version.

I CLICK Ok, once again, and here we go!

I TURN Live View ON.

And our rollover effect is now working.

I TURN Live View OFF.

And let's create a new css rule to style our current links. My cursor is still sitting inside of the link tags.

I CLICK New CSS Rule.

Compound selector.

And right after the link tag, I TYPE in a period, because it's gonna be a class style, and I NAME it current: (.navbar ul li a.current).

I define the rule in the navigation.css file, I CLICK Ok.

I GO to background, and I just BROWSE the background image, the current version, I CLICK Ok.

And I also CHANGE the background color to green (#0F0), just to see it in Dreamweaver.

I CLICK Ok

And now we have a class style we can apply to our current links. Let's say for example that "Menu 3" is the current link on this particular web page

I SELECT it

And down HERE on my HTML Tab, I just APPLY my current class style to the link

I TURN Live View ON

And the link looks different, so people will know that that is the page they are currently on.

You just create all of THESE web pages: Menu 1, Menu 2, or whatever you call them, you link them, and then you will apply the current class style to your current links.

Awesome. I TURN Live View OFF

And I CHANGE it back to "none" for now

And let's create our drop down menu

I GO to Code View

And THIS is our menu bar, basically: an unordered list, list items, and links. And I'm gonna create a drop down menu for the "Menu 1" link.

So right HERE, after the actual link end tag, but still inside of the li tags, I'm gonna insert an other unordered list.

I have to do it manually, so I HIT some Enter

I GO back

I HIT my space bar twice, just for formatting

And I TYPE in: <ul class=" and I'm gonna apply a brand new class style to it, I NAME it "subnav"

We are gonna style this subnav class style in just a bit

I CLOSE this OFF

HIT some Enter

And down here, I TYPE in the ul end tag: </ul>

I GO back

And HERE, I'm gonna need some list items with links in them.

So I'm just gonna COPY these.

And PASTE it in.

Let's FORMAT it real quick.

There you go! This is gonna be the drop down menu for our "Menu 1" link.

And I'm gonna CALL this "Drop 1"

You can call them whatever you want. I just name them real quick

The second one will BE "Drop 2" – and the third one will BE "Drop 3"
Good! Let's create a drop down menu for our "Menu 2" link as well.

I just COPY this whole thing

And right HERE, after the "Menu 2" link, I HIT some Enter.

I GO back.

And I just PASTE it in again.

Let's format it, but let's not do it manually, SELECT "Apply Source Formatting" and Dreamweaver will format it for us. Great!

I GO back to Design View.

And you can see the drop down menu HERE.

We need to style it, so I PUT my cursor in it.

I CLICK New CSS Rule.

Compound selector.

And I'm gonna style the subnav class style: (.navbar ul li .subnav)

I define the rule in the navigation.css file, I CLICK Ok

I GO to block, and I DO a Display:None, so when you are just looking at the page, you are not going to see the drop down menu.

I CLICK Ok.

And the drop down menu is gone. It's still there, but we can no longer see it.

I CLICK New CSS Rule.

Compound selector.

And I'm gonna style the li tags, within the subnav class style: (.navbar ul li .subnav li")

I define the rule in the navigation.css file, I CLICK Ok

I GO to box, and I DO a float:none, to clear the float:left property that our li tags inherit from one of our parent element.

I CLICK Ok.

And we are almost done. I just CLICK New CSS Rule, again.

Compound selector.

And I'm gonna style the link tags, within the subnav class style: (.navbar ul li .subnav li a)

I define the rule in the navigation.css file, I CLICK Ok

And I CHANGE the font-size to 14px, so the font is gonna be slightly smaller in our drop down menu.

I CLICK Ok.

And we just need 2 more css rules. I CLICK New CSS Rule.

Compound selector

And I just TYPE in the selector: .navbar ul li:hover ul.subnav

This is gonna style the subnav ul tags for li:hover

I define the rule in the navigation.css file, I CLICK Ok.

I GO to block, and I DO a Display:block, so our drop down menu will show up when somebody hovers over the actual li element.

I GO to box, and I GIVE it some padding, NOT same for all, top:5px, and bottom:5px.

I GO to positioning, and I DO a position:absolute.

I CLICK Ok.

I CLICK New CSS Rule.

Compound selector.

And I just TYPE it in: .navbar ul li:hover ul.subnav a

This is gonna style the subnav link tags for li:hover

I define the rule in the navigation.css file, I CLICK Ok

I GO to block, and I DO a Display:block

I GO to box, and let's MAKE our drop down menu 80px wide

I CLICK Ok

And we are done!

I TURN Live View ON.

And HERE is our drop down menu.

It's working, you just have to add it to your website, edit a little bit, and you've got a fancy css drop down menu.
I hope you learned something. I hope you enjoyed it. If you want more videos from me go to my website EasyWebDesignSystem.com, and join my list. Thanks a lot for watching, and see you in the next video. Bye!

Next Video:

Creating a Spry Menu Bar in Dreamweaver>>>

All videos in recommended learning order:

How to design a website using Adobe Fireworks>>>

Building a Website Start To Finish With Dreamweaver>>>

How To Embed a YouTube Video On Your Website>>>

Floating Div Tags in Dreamweaver>>>

How To Create a Table in Dreamweaver>>>

Building a Web From in Dreamweaver>>>

Dreamweaver CSS Website Layouts>>>

Creating a CSS Drop Down Menu in Dreamweaver>>>

Creating a Spry Menu Bar in Dreamweaver>>>

Creating Spry Tabbed Panels in Dreamweaver>>>

Creating a Spry Collapsible Panel in Dreamweaver>>>

Working with the Spry Tooltip Widget in Dreamweaver>>>

Creating a Web Photo Gallery/Album in Dreamweaver>>>

Adding JavaScript in Dreamweaver>>>

Send Email with a Web Form>>>