<div class="dropbtn">
  Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. Тескт сверху. 
<div class="good-image newElem dropdown-content hidden" id="others">
    <ul>
      <li>click 1</li>
      <li>click 1</li>
      <li>click 1</li>
      <li>click 1</li>
      <li>click 1</li>
    </ul>
</div>
  Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.Тескт снизу.
</div>

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    position: absolute;
    z-index: 1;
}
div#others {
    overflow-y: scroll;
}
.hidden {
    visibility: hidden;
}
/*************************/
.dropbtn {
  border : 1px solid red;
}

 document.addEventListener("DOMContentLoaded", function(event) { 
    
    button = document.querySelector(".dropbtn");
    button.addEventListener("mouseenter", ()=>{_dropmenu('remove')}, false); 
    button.addEventListener("mouseleave",()=>{_dropmenu('add')}, false); 

    function _dropmenu(par){
        let dropDown = document.querySelector("#others");
        dropDown.classList[par]("hidden");   
    }

    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn') && !event.target.matches('#others')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('hidden')) {
                    openDropdown.classList.remove('hidden');
                }
            }
        }
    }    
});