CSS Element "passing" over each other in a li

Question

I have a custom select (Dropbox), in which there is a search field in the list, this select with jquery was downloaded (I didn’t do it), well, I had to position one over the other for my purpose, the problem is that one select overrides the other when active, as if it were transparent, I already changed in css the property position, z-index, background color and nothing, I’ll leave a print of the problem, anyone suggest something? I don’t have much intimacy with frontend (css)

first image with the first select selected (without any underneath) second image with a select on top of others, look at the list of options

,

below the css snippet:

/* @group Results */
.chosen-container .chosen-results {
  color: #444; 
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
  display:none;
  margin: 0;
  padding: 1px 1px;
  list-style: none;
  text-align:left;
  z-index: 999999 !important
}
.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}
.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  color: #fff;
}
.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}
.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}
.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */