styling superfish with top level images

Greetings Experts!

I'm attempting to retro fit a pretty complex layout to add a superfish drop menu at  The existing layout utilizes background image with overflow visible of a preceding div along with transparent .pngs to render the curved menu on a gradient background.  I am considering replacing this strategy with solid menu images because the transparency issue is creating added complexity to adding the drop navs but wanted to check with the experts before going there.

The menu is showing up and functioning but I could really use some help figuring out how to adjust the positioning of the drops, the offset of child levels and background color of child items on focus.

Specifically, how to adjust the CSS to:
1. center the first menu that drops beneath the large top level images
2. keeping the top level items background transparent while using a background image on child levels
3. adjust the offset of third level menu
Who is Participating?
TheQuietShadowConnect With a Mentor Commented:
Well, I would suggest the following:
1. Using CSS, position the left and top of the fist menu to move it where desired. Because your page is centered, you will need to calculate it on-demand based off the window size and make sure that the function is called whenever the window is resized.
2. You will need to specify either ".menu ul ul {}" or create a new class for each of the child menus.
3. For this, it might be a good idea to use "position: relative" and subtract the amount needed.
I hope this helps, but without code... Although you have so many files in your site, that it would make it difficult to post it all here.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.