So you want to make those cool drop down menus without having to use javascript well heres how.

First open up Notepad or any other text editor(like Notepad++ or Scite). Type in
The above code is ,in short, the design of the button that will always be displayed
Explanation of the code Starts Here
#holder{} this sets the id attribute that will be used in the html. the code goes in between the { and the }
color: white sets the color of the text
background : blue sets the color of the background of the button
font-size Sets the size of the font
font-family : Arial sets the font of the text in and on the menu
left:32px sets the distance from the left side of the page
line-height: 20px the size of the of the line
overflow:hidden hides the menu
position: absolute allow the menu to go over any pictures or text in the page
text-align: center makes the text stay in the center
top: 50px how far the menu is from the top of the screen
width:100pxthe width of the menu
z-index: 100 makes the menu the priority
Code Explanation Ends Here
ok now that we have the menu button we can move onto what shows up under the menu button when we move the mouse over it

this is the code to create the drop down part of our drop down menu but it will look messy without the next piece of code
Explanation Of the Code Starts Here
#holder: hover{} this sets the id attribute that will be used in the HTML code and is activated when the mouse goes over the element.The code goes inside the { and the }.
background: darkblue the background of the whole menu when the mouse is over it
cursor: pointer this makes the cursor stay as a cursor and not turn into a hand when the mouse is hovering over it.
height: 40px this is what makes the dropdown box the drop down box, essentially it makes the box drop down
Code Explanation Ends Here
Now to make it look better


this code takes away the text decoration such as the underline on hyperlinks and is used to add buttons
Explanation Of Code Starts Here
#holder a:visited, #holder a{}this is the same as the rest except this is for the buttons that are in the menu and is to format them
Color: whitethis sets the color of the buttons text
display: block this moves the text down to the buttons
line-height: 18px sets the height for the buttons
text-decoration: nonethis gets rid of all text decor of the hyperlinks
width:100% Self Explanatory I Guess
End Of Explanation
so now it looks all pretty and is ready to use but what if you want the buttons to change color if you mouse over them

Code explanation changes the background and the text when you mouse over them

Now Save The file as "Dropdown.css"

How To Use(how to use in html)

Open a new document in your text editor and type in this code:

Then Save this in the same Folder that you saved your style sheet.
now double click the icon and view it
now say you wanted two menus or three menus i havent quite figured out how to do it but i do have one method that might work but would take a bit of work. Just Copy The Code 5 times and then change the #holder to say #holder1 or #holder2 etc. And then just add div tags with those id's
It would look like this

The code
HTML

CSS


if you want to add more buttons to the menu just increase the Height property by 20 or whatever the line-height property is for each extra button.

Try editing the code and add images to the background of the buttons if you want
if you want to email me. send it to[email] josh@amazingafrica.co.za[/email]

I Hope This Taught Some Beginners Of Css some things and everyone else something aswell

Wow, interesting

I Forgot To Add That this wont work in IE because it doesnt support :hover as far as i know. One more reason for everyone to have firefox

Hey, this tutorial is sick, thanks