To help make it clear I now have 2 demos up…
1. uses the method of moving the big image around and displaying it in the ul’s
That has the mentioned problem. The menu is WordPress. So my client can come along and add a menu item. Also I would have to somehow get WordPress to #id the menu items!
This does look the best. http://gasolicious.com/menu_question/menu_test.html
Maybe if they were fixed width AND I could get WordPress to use an id I could make CSS that would take care of any reasonable number of menus? Of course I would have to worry about WordPress changing the ids when an item was added!
Do you have any further thoughts?
2. uses a slice of the image as a repeating background. This works but does not look as nice as it does not have the variation of shade over the image vertically.
any ideas, any other ways to achieve this or make one of these 2 work better?
Even design ideas, something that would look good but avoid all of this trouble, say a different treatment for sub menus and just the gradient in the top bar.
Just a thought but is there any way css “clip” could help?