Pop-Up Menus

This page is still in the works.

What Is This About?

The first time I came across a site that used drop down navigation menus I was in awe. Well the good ones where big in size and if you did not have javascript you would not see the menu at all, that changed in the beginning of 2002 with Eric Meyer's Pure CSS Menus. The Pure CSS Menus used no javascript, in old browsers you would see all the items, and in browsers that did not support the level of css you could still see the top level. This was all great; but I could not leave well enough alone and had to try to build one that would have the menus appear above the menu item.

How?

The menu bar (#bottomnav) is positioned relative. The submenus (which are nested list) are positioned absolutely with bottom: 1em so that they are offset from the bottom of #bottomnav.

bottom: 1em?

"But I thought bottom: 1em would place it at the bottom of the screen." Nope, it places 1em from the bottom of the containing box, which is #bottomnav, because it is positioned relative, absolute, or fixed.

A simple Example

A simple example now exist with sub submenus.

I am Not Seeing It.

I know it works with Mozilla 1.4b. It does not work with Opera 7.0 and Internet Explorer 6.0.

Return to CSS Play.

Bugs

In Mozilla 1.4b, when you click on the links in the menus they become inline instead of block.

Some extra text
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*

© 2003 Seamus P. H. Leahy
You may take and improve upon this.