I have issue with my css3 in position tag

Question

I have a problem with a drop down navigation bar, when I define the position in css, the drop down nav is going behind the image. I hope you understand my issue. Please help me, and also sorry for the bad English.

 .img-slider-ul { list-style: none; margin: 0; padding: 0; height:350px; overflow:hidden; position:relative; } .img-slider-li { position:absolute; } .img-slider{ border: 1px solid #000; border-radius: 3px; box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3); height:350px; } .img-slider-li:nth-child(4) { animation: xfade 16s 0s infinite; } .img-slider-li:nth-child(3) { animation: xfade 16s 4s infinite; } .img-slider-li:nth-child(2) { animation: xfade 16s 8s infinite; } .img-slider-li:nth-child(1) { animation: xfade 16s 12s infinite; } @keyframes xfade{ 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } } 

 <ul class="img-slider-ul"> <li class="img-slider-li"><img class="img-slider" title="" alt="css3" src="https://image.ibb.co/dnt83v/img01.png" /></li> <li class="img-slider-li"><img class="img-slider" title="" alt="css3" src="https://image.ibb.co/iJuFiv/img02.png" /></li> <li class="img-slider-li"><img class="img-slider" title="" alt="css3" src="https://image.ibb.co/nf8VGF/img03.png" /></li> <li class="img-slider-li"><img class="img-slider" title="" alt="css3" src="https://preview.ibb.co/hJZ4bF/img04.png" /></li> </ul> 

Answer 1

Add 'dropdown menu' Z-index should be high when compare to slider section

 .img-slider-ul {
      list-style: none;
       margin: 0;
       padding: 0;
       height:350px;
       overflow:hidden;
       position:relative;
       z-index:99;
  }

for dropdown menu class add z-index:999;

Answer 2

Just Use z-index:0; in your slider ul

.img-slider-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height:350px;
  overflow:hidden;
  position:relative;
  z-index: 0;
}