Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

  • Index
  •  » ClickCartPro 6
  •  » CSS Flyout menu - how can I stop it appearing behine the main content?

#1 04-25-2010 04:09:39

sushisushi
Member
From: barnsley, UK
Registered: 06-26-2008
Posts: 88
Website

CSS Flyout menu - how can I stop it appearing behine the main content?

Hi guys,

I know CCP6 doesn't support CSS menus but have hard coded a vertical menu into our site using a CSS menu template and it works great.

The problem is:

When I drop the code in to the left column of our 3 column site it looks great. But when you mouse over the menu the hover / flyout appears behind the content on the main column.

Is this because it's in tables? Does anyone know a quick fix?

It's not on our site now as it's live so I had to remove it.

Thanks


Buy sushi making ingredients, sushi party kits and Japanese food at wwwsushisushi.co.uk

Offline

 

#2 04-25-2010 08:37:30

Design_Wholesale
Member
From: England!
Registered: 11-21-2008
Posts: 1104
Website

Re: CSS Flyout menu - how can I stop it appearing behine the main content?

This sounds like a z-index problem.

I guess that you will have used z-index(es) to create your menu, so you may be able to fix the problem by making your middle column have a z-index and by ensuring that the value is set lower than that set for the hover effects in your menu, but not lower than the main menu column.

Last edited by Design_Wholesale (04-25-2010 08:38:12)

Offline

 

#3 04-27-2010 10:04:19

sushisushi
Member
From: barnsley, UK
Registered: 06-26-2008
Posts: 88
Website

Re: CSS Flyout menu - how can I stop it appearing behine the main content?

thanks for that.

I seem to be trying in vein with this z-index lark. No z-index change seems to work at all.

were exactly should I change the z-index. Can you take a look at my source code? wwwsushisushi.co.uk


Buy sushi making ingredients, sushi party kits and Japanese food at wwwsushisushi.co.uk

Offline

 

#4 05-01-2010 18:15:29

Design_Wholesale
Member
From: England!
Registered: 11-21-2008
Posts: 1104
Website

Re: CSS Flyout menu - how can I stop it appearing behine the main content?

I have had a look, but could not tell you how to implement correct indexing on the page just by looking at the code. - You need to map out the layout of your site from the point of view of everything being z-index 0 and then build from there.

Any z-index value >= 1 should flow over anything with a z-index of 0, but browsers don't assume that something has a z-index of 0 just because there isn't a z-index value in the CSS for that particular element (table, div, etc.) - if there is no z-index value given for something it will usually prevent something from flowing around/over it, so you need to look at changing or adding a z-index value for those elements adjacent to the menu you want to implement even if those elements would not normally require a z-index.

Also look for articles by wwww3schools.com and  through Google. - It can be very awkward and fiddly to get it right.

Last edited by Design_Wholesale (05-01-2010 18:17:50)

Offline

 
  • Index
  •  » ClickCartPro 6
  •  » CSS Flyout menu - how can I stop it appearing behine the main content?

Board footer