<div class="dropdown_main">
  <a href="#">
    드롭다운 메뉴
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
      <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
    </svg>
  </a>
  <div class="dropdown_menu">
    <a href="#">
      <div>· 하위 링크 1</div>
    </a>
    <a href="#">
      <div>· 하위 링크 2</div>
    </a>
    <a href="#">
      <div>· 하위 링크 3</div>
    </a>
  </div>
</div>

body {
  text-align: center;
}

.dropdown_main {
  position: relative;
  display: inline-block;
}

.dropdown_main a {
  font-size: 20px;
  color: black;
  text-decoration: none;
  font-weight: bold;
}

.dropdown_menu {
  position: absolute;
  display: none;
  width: 157px;
  background: linear-gradient(to bottom, #cb3030, #f17bff);
  border-radius: 5%;
  box-shadow: 4px 4px 10px #c5b0b0;
}

.dropdown_menu a {
  display: block;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
}

.dropdown_menu a div {
  text-align: left;
  padding: 0.5rem;
}

.dropdown_main:hover .dropdown_menu {
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.