Keep the drop down menu on top of other elements

Question

I have a drop down menu to change the language but when the list got longer and the menu now is behind the other element.

I don't really get what is need to be change or what CSS I have to apply to get the dropdown stay on top of the other elements so that they can still see the list and select them.

I'm trying to get most of the CSS that applied to the element, but they are "LESS"

These are part of them

li.lang-picker:first-child {
  border-right: none;
}
.ui-append.ui-select {
  background-color: white;
}
#lang-picker {
  margin: -7px 15px 0 -18px;
  border-color: transparent;
}
#lang-picker:hover {
  border-color: #CCC;
}
#lang-picker ul {
  background: white;
  display: inline-block;
}
#lang-picker ul li {
  display: block;
}
#lang-picker .ui-select-menu {
  width: auto;
  border-color: #CCC;
}
#lang-picker .ui-select-menu ul {
  width: auto;
}
#lang-picker .ui-selected::before {
  margin-right: 5px;
}
#lang-picker .ui-smedium {
  width: auto;
}
#lang-picker > .icon {
  background: none;
  color: #555;
  padding: 0 10px 0 0;
}
#lang-picker > .icon:hover {
  background: none;
  color: #555;
}
/*********************************************************
* Filter
*/
.gallery-header .header {
  float: left;
  padding-bottom: 10px;
  font-family: 'Open Sans Light', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin-right: 20px;
}
.gallery-header .header h1,
.gallery-header .header p {
  display: inline;
  margin-right: 10px;
  font-weight: normal;
  letter-spacing: -0.25px;
}
.gallery-header .header h1 {
  font-size: 2.4em;
  line-height: 16px;
  color: #3fb58e;
}
.gallery-header .header p {
  font-size: 1.4em;
  color: #555555;
}
.gallery-header .header p a {
  color: #20abdc;
  text-decoration: none;
}
.gallery-header .header p a:hover {
  text-decoration: underline;
  color: #4abce5;
}
#tools h1 {
  line-height: 1.4em;
}
.filter {
  position: relative;
  background: #3fb58e;
  float: right;
  z-index: 3;
  padding: 0.5em 1em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.filter label {
  color: #FFF;
  line-height: 1.6;
}
.filter #search-filter {
  border-color: #38a27f;
}
.filter #search-filter:hover {
  border-color: #2b7c61;
}
.filter #search-filter .icon {
  background: #328f70;
}
.filter #search-filter .ui-select-menu {
  border-color: #3fb58e;
}
.filter:before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #3fb58e;
  margin-left: -10px;
}

Answer 1

You can use 'z-index' property together with 'position' property. In order 'z-index' to work, position should be set to 'relative'.

Answer 2

Give z-index:100 or more try giving more.

div.ui-select-menu
{
    z-index:100;
}