Thank you for helping make CSS a bit more accessible!

Wow! Thats a really nice script CSS Drive!

As a matter of fact, one can make something better than the example above, using CSS - please see the submitted link. Just use CSS and state cell borders. That's it.

This works great in a REAL browser. Unfortunately, IE does not cache background images so you get the annoying flash due to the downloading of the over background image. Till the rest of the browser world gets in CSS compliance there is something you can do to avoid the flashie thingie...

Make a single image with both the ‘menu.jpg’ and ‘menuover.jpg’ (one on top of the other). Name it ‘menu.jpg’. Change the ‘a:hover’ image to the new ‘menu.jpg’ image then add the following to the ‘.menulist a:hover’ class:

background-position: left bottom;

You will only download the one image and on mouse over, change the view from the top left of the image to the bottom left. Since we are only seeing 20px of the image at a time, the mouse over works, no flash.

Going one step further, encapsulate all link tags in an unordered list. This gets rid of another IE problem with IE not using the margin settings on ‘a:hover’. It also will make the menu more manageable in terms of positioning and segregation. See 'Markerless and "no indent" Lists' in 'Examples' regarding unordered lists.

Have fun!

Really cool looking mouse over effect and vertical menu design. Thanks for the free information.
Health And Wellness