Dropdown menu covers breadcrumb menu

1

I have created a dropdown menu using slides (900px x 200px) where the background is invisible allowing the selected menu item (slide) to drop down over the web page background.

The problem I am having is that I have added a breadcrumb menu just below the dropdown menu, this means that I can’t select the breadcrumb link as it’s not behaving like an active link as it’s covered by the invisible dropdown background.

I’ve tried bringing the z-index higher on the breadcrumb menu but then the dropdown menu goes behind the breadcrumb bar.
Is there a way I can set the invisible background of the dropdown so I can click a link through it.
This all sounds a bit convoluted I know but here is an example of what I’m working on. There is a link on the page to show the 2 states using the z-index.
http://www.esslab.com/dropdown/

Is there something I can add here to make it work?
.HYPE_scene {
background-color: transparent !important;
}

Thanks
Terry

2

Would it not be better to add the breadcrumb menu to the hype scene ?

3

That’s not really an option because each section of the site requires a separate breadcrumb menu and the main dropdown goes across the whole site.
However, since posting, I did some more googling and found a little known (AFIK) markup "pointer-events: none;"
I added this to the dropdown and it does the trick, I can now click through the invisible background!

1 Like
4

Nice. Can you post a link to the page you found.

Also I was going to post an example of adjusting the scene hight when I get back home.

There is code for it in this in my post on this thread

5

Here you are, I’ll be using this one in the future as it will be quite useful with some of my hype work, where the transparent background covers an underlying link -

2 Likes