As you can see we have 3 buttons, all of which we want to trigger an onmouseover drop down menu effect on. We already have the code in our <head> area to tell it to work so all we need to do now is construct the menu. This is where layers are going to come in to play.
We are going to make a total of 7 layers in all but let's stick with the main three for the buttons right now. I'm using Dreamweaver so it's a breeze for me to create layers and position them where I need them to be. Also notice my page is flush left. If your page is centered or the white space on the left side can change depending on whether or not the user maximizes or minimizes their browser I'd suggest throwing "all" of your content into an absolute positioned layer before you even start the drop downs.
Why do this? Well if you don't and you have your page in the center of the screen when a user shrinks or minimizes their screen the absolute "left" position of your drop downs has now changed. Now they will no longer match up with the buttons. They will be off the mark so to speak. So either flush your page left with a zero margin or put your entire page inside of one huge absolute layer.
If not you will have problems, especially for Netscape users. Let's move on. |
