Opacity and z-index in elements

Question

I have a site with a dropdown menu. When the menu expands it goes behind some li that i have later on. The z-index on the li is 10 and currently the dropdown ul does not have a z-index but it has opacity:1. Tried every combination of opacities and z-indexes in the mentioned elements but i cannot make it work as expected. I want the li to be behind the dropdown ul when it expands. The li is relatively positioned (my design needs that) and has a float property. The only way i can make this work is by using z-index:1 for the li but i don't want that as it messes up with some other elements. Any ideas?

Answer 1

If you want to use the z-index property, we must put on the div position:absolute;, position:fixed; or position:relative;

Answer 2

You should maybe take a look at your positions tags,

If you don't give position value to your elements in your css, then your z-index value will not be considered by the browser.