Question

I have searched for this topic but nothing seems to be helping me with my issue.

I have a search function that drops down when you start typing but it drops behind the menu bar hiding the search results.
I have played with the z-indexes but nothing helps.

I read that z-index doesn’t work for certain positions. Is this true? If so how can I get the results to display over the menu bar?

If I change the positions my menu jumps out of place.

The css for the results:

#results {
z-index: 10000;
position: absolute;
width: 400px;
float: right;
background-color: #FFF;
text-align: left;

the css for the menu:

.menu {
position: relative;
float: left;
width: 900px;
height: 40px;
margin-top: 17px;
z-index: 3;
margin-left: 40px;
margin-bottom: 6px;

Thanks!

Answer 1

Since .menu2 has a z-index of 3, .banner (who is a parent to your search dropdown) needs to have a higer z-index (the class names are from collegesa.co.za).

Try to set z-index to 4 for .banner

.banner {
    z-index: 4;
}