html - Dropdown Opens Under Modal - CSS Issue

Question

I have a bootstrap modal which has several dropdowns inside it due to lots of stuff I set overflow: auto so that it has scroll bar (see scroll bar at right side of the pic).

Now problem is when I click dropdown it opens under the modal (see image) I need dropdown to open over that modal.

P.S: I googled and found lots of solution where we need to set modal CSS property overflow: visible. But in my case I have to set overflow: auto coz I have lots of stuff inside modal and scroll bar is necessary otherwise modal height goes over the page.

Need some CSS expert to fix this issue.

Modal CSS

.modal {
  max-height: 250px;
  overflow: auto; 
}

Dropdown CSS

ul.dropdown {
  z-index: 999999;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

 ul.dropdown li {
  top: 110%;
  padding: 0;
  max-width: 500px;
  max-height: 197px;
  position: absolute;
} 

Answer 1

Hi you need to give the absolute position for your dropdown ul like this

ul.dropdown {
  position: absolute;
  top: 110%;
  display: inline-block;
  vertical-align: middle;
}

and for the li childrens :

ul.dropdown li {
  padding: 0;
  max-width: 500px;
  max-height: 197px;
}