?
Solved

styling superfish with top level images

Posted on 2010-09-20
1
Medium Priority
?
506 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

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 …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

777 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