Question

I have a drop down that is concealed by the image as shown in the following image. I want the drop down to be on the top of the image. How can I do that?

Is it done through CSS?

Answer 1

you can do this by putting greater z-index to dropdown

An element with greater stack order is always in front of an element with a lower stack order.

like

img{
  z-index:5;
}

.dropdown{
   z-index:6;
}

Note: z-index only works on positioned elements (position:relative , position:absolute, or position:fixed).

.photo-thumb {
    margin-top: 20px;
    position: relative;
    width: 160px;
    z-index: 6;  <------- you have z-index 6 here 
}

and

.menu ul {
    background: none repeat scroll 0 0 #1F2024;
    border-radius: 0 0 5px 5px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 40px;
    transition: opacity 0.25s ease 0.1s;

    z-index: 7; <-----this is the key try z-index 7 here 
}