Member Avatar for khurram123

Hi.

I have problem with menu. I have develop drop down menu and slider. But i am facing problem that menu is hiding behind slider.
How can i solve this problem.

Pease help me.

Thanks

  • 2 Contributors
  • 2 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by patk570

Dani AI

Generated

This is not a JavaScript bug — it’s a CSS stacking/overflow problem. As pointed out, z-index is involved, but changing one value alone can fail if the dropdown is inside a different stacking context or if a parent has overflow:hidden. The root causes to check are (1) whether the menu or its ancestors are positioned, (2) whether an ancestor creates a new stacking context (for example via transform, opacity < 1, filter, will-change, position with z-index), and (3) whether a parent has overflow:hidden that clips the dropdown.

Concrete fixes (in order of least-to-most invasive):

  • Give the menu a positioned ancestor and a high z-index so it paints above the slider. For example:

    .site-nav { position: relative; z-index: 9999; }
.site-nav .submenu { position: absolute; z-index: 10000; }
.slider-wrapper { position: relative; z-index: 1; }

  • If the slider or one of its parents uses a CSS transform (or opacity, filter, etc.), the menu cannot escape that stacking context. Either remove/disable the transform on the slider container or move the menu out of the slider DOM (place it as a sibling of the slider or a direct child of body).

  • If the slider’s container uses overflow:hidden, the dropdown will be clipped even with a higher z-index. Make the parent overflow: visible or move the dropdown outside that container.

Avoid setting the slider to a large negative z-index as a first choice — negative values can cause interaction and layout issues. Use browser DevTools to inspect computed z-index, look for transform/opacity on ancestors, and test moving the nav in the DOM. For background reading, see the MDN notes on z-index and stacking contexts: MDN: z-index and MDN: stacking context.

Recommended Answers

All 2 Replies

Member Avatar for patk570

Change to this:

.cbp-fwslider {
    margin: 0px 0px 10px; padding: 0px; border: 1px solid rgb(0, 0, 0); border-image: none; overflow: hidden; position: relative;  z-index:-1;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.