CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
farjam
farjam

Reputation: 2289

CSS: Dropdown menu gets hidden behind the content

Please take a look at this page

If you click on "Obesity Surgery", there is a drop down menu that is supposed to display. (It's using Twitter Bootstrap drop down menu).

I can confirm the menu is there, but it gets hidden behind the underlying content even though it has an absolute position with a high z-index.

Do you have any idea how to fix this?

Upvotes: 5

Views: 59906

Answers (5)

Shivani
Shivani

Reputation: 301

Try adding the following styles to class dropdown:

.dropdown {
  position: fixed;
  z-index: 9999;
}

Upvotes: 0

ppak10
ppak10

Reputation: 2363

Check if the overflow setting is set to hidden, if it is remove the value.

.banner {
    overflow: hidden // remove
}

Upvotes: 3

farjam
farjam

Reputation: 2289

The issue was actually due to the very top image (image of the clouds) being set with the position absolute and a high z-index. Thank you all for your help.

Upvotes: 0

jah
jah

Reputation: 1305

Obviously the problem lies with the z-index. But the problem is actually all the way up to the top parent. The header element with banner class has z-index: 1. Setting it to a higher number fixes the problem.

.banner {
    position: relative;
    z-index: 10;
}

Upvotes: 14

MadScientist
MadScientist

Reputation: 565

You should set the z-index:9999; of the menu element and its children to ensure that they are always on top.

You can play with the z-index of other elements to keep them above others on the page.

Upvotes: 2

Related Questions