Solved

styling superfish with top level images

Posted on 2010-09-20
1
502 Views
Last Modified: 2012-05-10
Greetings Experts!

I'm attempting to retro fit a pretty complex layout to add a superfish drop menu at http://168.215.185.177/2.75.html.  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
0
Comment
Question by:teenaw
1 Comment
 
LVL 6

Accepted Solution

by:
TheQuietShadow earned 500 total points
ID: 33717476
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.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now