Want a simple drop down menu with CSS and HTML using dreamweaver CS5?

Hello, I found an awesome drop down menu on Google.

So first you want to go to this link

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Now instead of reading the whole tutorial I’ll get you through it quicker.

Go to the first yellow box and copy the code for your HTML.


Now take this code and paste it into your homepage html. It makes it easier to paste it at the end of the rest of your code, so you don’t get confused.

Now you want to copy the next yellow box for your CSS

* NOTE THIS IS NOT THE ENTIRE CSS YOU NEED TO GO TO THE WEBSITE AND MAKE SURE YOU SELECT ALL ON THE TEXT ; THEN COPY AND PASTE. *

This screen shot just lets you know what you should be seeing.


Something that is a little confusing in the directions is next. the tutorial states ” One thing of note however is applying position:relative; to the list items, this allows us to use position:absolute; on the nesteds later on. ”

Essentially go to your css and make a class called .positionrelative  . The code will be .positionrelative {position:relative;}

Then go to your html and go to all the list items involved in the drop down menu and give them that class name. The html should look something like this.


Now you are almost done you simply need to copy and past all the html codes that are under nested lists.

1.)

2.) 

3.)

4.) And these two steps and you are done!


Now that you are done your drop down menu should look like this.

This picture is from
http://csswizardry.com/demos/css-dropdown/

 

Nikki Abban

~ by catchmeonfifth on November 19, 2011.

 
%d bloggers like this: