home about us contact us

free scripts advanced scripts online tools great books web related tutorials contributed tutorials news archive geek toys!

help forum live chat help

Creating Awesome CSS (Cascading Style Sheet) Menu's with Multiple Levels of Expansion

Expanding Menus.

I really like expanding menus that preserve real estate on the main page. You see the basic menu and then when you hover over it, it pops out sub-layers. I found two great tutorials on making either a horizontal or vertical drop down menu. I then modified them to combine them and shifted the vertical drop down menu to the right.

I borrowed the concepts (or ripped them off if you prefer :-) ) from where they have both a vertical and horizontal example.

Combining the Concepts:

First I duplicated their examples for both the horizonal and vertical drop downs. Next I decided, why not combine them because I have a particular page I am looking at revising where I want two menus, one horizontal and one vertical. I was fairly successful at combining them with one exception I am still working on -- the horizontal drop down will not work if the vertical drop down is snug up against it. I think I may have to work on z-indexes ... if you know the solution, please drop a comment for me. To solve it (and this will work in my case) I added a top margin.

For my case, I then wanted the vertical menu to be floated right instead of left. That required two small adjustments, first to float the menu right, and then to expand it back to the left. Again, with the one exception if the two were snug against each other, I was successful in combining the horizontal drop down with a right aligned vertical menu. You can see it here.

If you would like to learn more with our other tutorials:
Back to the Tutorial Index