Content over z-index class

I am trying to get my content over the z-index content, I have tried give it a bigger number but not working, could someone please help me with my coding to see if I have done anything wrong? many thanks

each number will pop up a list of content when mouse hover over, however the numbers are always in front of the hovering content, for example when mouse hover over "8", the popping up content is behind number "9", I am trying to get the hovering content come to the front, any ideas?

span.dropt {
  position: absolute;
  background: #006534;
  border: 2px solid #006534;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  line-height: 10px;
  padding: 2px 2px;
  text-align: center;
  color: white;
  cursor: pointer;
  z-index: 1;
}
span.dropt:hover {
  text-decoration: none;
  background: #ffffff;
  color: black;
}
span.dropt:hover span {
  left: 2%;
  background: #ffffff;
  \ margin: 20px 0 0 70px;
  background: #ffffff;
  z-index: 2;
}
span.dropt span {
  position: absolute;
  left: -999px;
  margin: -15px 0 0 20px;
  width: 110px;
  height: 105px;
  padding: 3px 3px 3px 3px;
  border-style: solid;
  border-color: #006534;
  border-width: 1px;
  text-align: left;
  line-height: 17px;
  z-index: 2;
}

 <span class="dropt" style="top:280px; left:490px;">8
    <span>content</span></span>

<span class="dropt" style="top:290px; left:520px;">9
    <span>content</span></span>

Solution

Remove z-index: 1; from your .dropt class.

What is happening is that your .dropt elements have a base stacking context of 1 when you set z-index: 1;.

So your inner span has a z-index of 2 within 1 context. Picture this like you have different layers.

Since your second .dropt element is below in the markup, it's going to be on top of the other.