Custom Dropdown

by ShaCP

HTML

<div class="select">
  <div class="selected-option">Selected Option</div>
  <div class="menu-container">
    <menu class="menu">
      <li class="menu-option">Option 1</li>
      <li class="menu-option">Option 1</li>
    </menu>
  </div>
</div>

CSS

.select {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
  width: 300px;
}

menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.selected-option,
.menu-option {
  padding: 5px;
}

.menu {
  display: grid;
  grid-auto-rows: 1fr;
  border-radius: 5px;
  outline: 1px solid black;
}

/* .menu::before {
  content: "";
} */

.menu-container {
  top: 0;
  border-radius: 5px;
  position: absolute;
  box-shadow: 0px 0px 8px 2px black;
  width: 100%;
}

.selected-option {
  outline: 1px solid black;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}