I am trying to get three layers to stack properly. They should look like this (top layer first)
.centered - contains a png of a white curved banner
.blue-dropdown - contains a blue menu that drops down on hover, this should appear from under the white curved banner
.header-bg - a gradient background image, this should appear behind the blue drop down, but now it is appearing above the blue drop down
The problem is that the background layer is appearing above the blue-dropdown layer. even though the z-index are set properly.
Can someone help explain what is happening here and how I can fix it?