html - CSS: Opacity make display object go under other objects -

my menu elements supposed on top of image. this

before

<div class="menu">...</div> <img src="..."/>

however when add opacity style of image, menu elements lay under image

after

<div class="menu">...</div> <img src="..." style="opacity:0.9"/>

does know what's going on , how fix issue?

my bet opacity giving z-index image. have tried adjusting z-index on menu?

OSX