Dropdown List

<!DOCTYPE html>
<html lang="en">
<head>
<title>Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

.sel {  font-size:25px;display:block;margin:20px 5px;
          font-family:arial;font-weight:900;cursor:pointer;  }


#box {   width:150px;height:40px;border:1px solid;
              overflow-y:scroll;overflow-x:hidden;   }


#bt { width:150px;height:40px;font-size:25px;font-family:arial;
         font-weight:900;padding:0 0 15px 0;border:none;outline:none;
       position:fixed;   }


</style>
</head>
<body>


<div id='box'>
<button id='bt'>Select</button>
<span style='margin-top:60px;' class='sel'>Blue</span>
<span class='sel'>Red</span>
<span class='sel'>Green</span>
<span class='sel'>Olive</span>
<span class='sel'>Navy</span>
<span class='sel'>White</span>
<span class='sel'>Blue</span>
<span class='sel'>Red</span>
<span class='sel'>Green</span>
<span class='sel'>Olive</span>
<span class='sel'>Navy</span>
<span class='sel'>White</span>
</div>


<script>

i=0;

bt.onclick=()=>{
if(i==0){i++;
box.style.height='400px';
}else if(i==1){i--;
box.style.height='40px';
}
}


</script>
</body>
</html>