<div class="dropdown">
   <input type="text" class="text2" readonly placeholder="选择你擅长的技能">
   <div class="option">
     <div onmouseover="show('html')">HTML</div>
     <div onmouseover="show('CSS')">CSS</div>
     <div onmouseover="show('JavaScript')">JavaScript</div>
     <div onmouseover="show('ReactJS')">ReactJS</div>
     <div onmouseover="show('VueJS')">VueJS</div>
   </div>
</div>

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body 
{
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #f9f9f9;
}
.dropdown 
{
  position: relative;
  margin-top: 100px;
  width: 300px;
  height: 50px;
}
.dropdown::before 
{
  content: '';
  position: absolute;
  top: 25px;
  right: 28px;
  width: 12px;
  height: 2px;
  background: #555;
  transform: rotate(40deg);
  z-index: 10;
  transition: 0.5s;
}
.dropdown.active::before 
{
  right: 20px;
}
.dropdown::after 
{
  content: '';
  position: absolute;
  top: 25px;
  right: 20px;
  width: 12px;
  height: 2px;
  background: #555;
  transform: rotate(-40deg);
  z-index: 10;
  transition: 0.5s;
}
.dropdown.active::after 
{
  right: 28px;
}
.dropdown input 
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 16px;
  background: #fff;
  text-transform: capitalize;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  outline: none;
}
.dropdown .option 
{
  position: absolute;
  top: 70px;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 30px rgba(0,0,0,0.05);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s;
}
.dropdown.active .option 
{
  visibility: visible;
  opacity: 1;
}
.dropdown .option div 
{
  padding: 12px 20px;
  cursor: pointer;
}
.dropdown .option div:hover 
{
  background: #62baea;
  color: #fff;
}

function show(a){
  document.querySelector('.text2').value = a;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function(){
  dropdown.classList.toggle('active')
}