Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

styling superfish with top level images

Posted on 2010-09-20
1
Medium Priority
?
514 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

577 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