Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

styling superfish with top level images

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to dynamically set the form action using jQuery.

604 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