How to correctly customize the drop-down menu created by ul-li tags?

Question

I created a drop-down menu using tags ul and li. This works, but I want that when opening the menu, it does not shift the blocks below like on screen. So, this is my css:

#select-ul {
  display: block;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  float: none;
  overflow-y:scroll;
}

Answer 1

Change your css a bit like

OLD CSS

#select-ul {
  display: block;
  cursor: pointer;
  border: 0.1px solid rgba(0, 0, 0, .1);
  border-top: 0;
  background-color: white;
  padding: 12px;
  height: 300px;
  overflow: auto;
  float: none;
  overflow-y:scroll;
}

NEW CSS

#select-ul {
  z-index: 1;
  display: none;
  position: absolute;
  width: 100%; /* you can change but must give width */
  max-height: 300px;
  cursor: pointer;
  border: 1px solid #e5e5e5; /* 0.1px doesn't work */
  border-top: 0;
  padding: 12px;
  background-color: white;
  overflow: hidden scroll;
}

#select-ul.active {
  display: flex;
  flex-direction: column;
}

And a bit JavaScript convert it in vue as you are using it.

const dropdown = document.querySelector('#select-ul');

dropdown.addEventListener('click', () => {
  dropdown.classList.add('active'); // you can also use toggle
});

// additionally 
dropdown.addEventListener('blur', () => {
  dropdown.classList.remove('active');
});

Lemme know if this work! TBH I am not getting what scaling issue you are talking about. *elaborate it some more.