.dropdown {
  position: relative;
  display: inline-block;
}
			
.dropbtn {
  background-color: darkgrey;
  font-family : verdana;
  color: white;
  padding: 0px;
  margin: 0px;
  font-size: 1.0em;
  border: none;
  cursor: pointer;
  width : 100%;
  height : 2.5em;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  /*min-width: 160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content span {
  width : 100%;
  color: black;
  padding: 8px ;
  text-decoration: none;
  display: block;
}

.dropdown-content span:hover {
  width : 100%;
	padding: 8px ;
	background-color: silver;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: grey;
}

/*

참고 https://wazacs.tistory.com/34


<div class="selectBox2 ">
  <button class="label">fruits 🍊</button>
  <ul class="optionList">
    <li class="optionItem">apple</li>
    <li class="optionItem">orange</li>
    <li class="optionItem">grape</li>
    <li class="optionItem">melon</li>
  </ul>
</div>




 

select::-ms-expand { 
  display: none;
}

select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select {
  height: 35px;
  background: url('/icon/dropdown-arrow.png') calc(100% - 7px) center no-repeat;
  background-size: 20px;
/*  padding: 5px 30px 5px 10px;
  border-radius: 4px;
  outline: 0 none;
}
.select option {
  background: black;
  color: #fff;
  padding: 3px 0;
}
.select option:hover {
  background: rgb(58, 58, 58)
}

*/

/*]

lightcoral
*/
.selectBox2 * { box-sizing: border-box; }   /* div */
.selectBox2 {
  position: relative;
  border-radius: 4px;
  border: 1px solid ;
  background: url('/icon/dropdown-arrow.png') calc(100% - 7px) center no-repeat;
  background-size: 20px;
  height: 35px;
  cursor: pointer;
}

/*
.selectBox2:after {
  content: '';
  display: block; 
  width: 2px;
  position: absolute; 
  top: 0px; 
  right: 0px;
/*
  height: 100%; 
  background: lightcoral;
}
  */

.selectBox2 .label {		// input tag
  display: inline-block;
  height: inherit;
  border: 0 none;
  outline: 0 none;
  background: transparent; 
  cursor: pointer;
  text-align : left;
  padding-left: 30px;
  
 /*
  display: flex;
  align-items: center;
 
 */
}

.selectBox2 .optionList {		// ul
  position: absolute; 
  top: 30px;
  left: 0px;
  width: 100%;
  background: lightgrey;
  color: #fff;
  list-style-type: none;
  padding: 0;
  border-radius: 3px;
  max-height: 0px;
  transition: .1s ease-in;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index : 1;
  display : block;
 /*
  overflow: scroll;
  top: 28px;
  background: lightcoral;
 */
}

.selectBox2.active .optionList {
  max-height: 500px;
  display : block;
}

.selectBox2 .optionItem {
  display : block;
  border-bottom: 1px dashed grey;
 /*
 rgb(170, 72, 72)
*/ 
  padding: 5px 15px 5px;
  transition: .1s;
}

.selectBox2 .optionItem:hover {
  display : block;
  background: darkgrey;
 /*
  background: rgb(175, 93, 93);
 */
}

.selectBox2 .optionItem:last-child {
  border-bottom: 0 none;
}

/*
*/

.selectBox2 .optionList::-webkit-scrollbar {width: 6px;}
.selectBox2 .optionList::-webkit-scrollbar-track {background: transparent; }
.selectBox2 .optionList::-webkit-scrollbar-thumb {background: #303030; border-radius: 45px;}
.selectBox2 .optionList::-webkit-scrollbar-thumb:hover {background: #303030;}