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 tanfa.co.uk 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

This site is totally free to use, you have absolutely no moral or legal obligations to help us continue.
There are however, some costs involved in running the site.

<random humor>
Plus Franki needs to get his girl out on a date soon.
</random humor>

So if this site helped you find your way, perhaps you could consider contributing to our costs. Whatever amount you feel this site was worth to you would be just wonderful.
Use PayPal if you do decide to share and help us with the costs and in appreciation for our time and attention, or alternatively buy a book from our Bookstore..

  Time in Don's part of the world is:   May 9, 2008, 7:43 pm
  Time in Franki's part of the world is: May 10, 2008, 8:43 am
  Don't worry neither one sleeps very long!