드롭다운 메뉴 만들기

html

<div class="ham-con">

            <div class="navbar-nav">
                <div class="search-con d-flex justify-content-center">
                    <input type="text" placeholder="검색어를 입력해주세요." />
                    <i class="bi bi-search"></i>
                </div>
            </div>

            <div id="ham-menu-wrap">

                <div class="ham-menu mt-5">
                    <ul class="ham-top-menu">
                        <li><a href="#">리뷰보기<i class="bi bi-caret-down-fill"></i></a>
                            <ul class="ham-sub-menu">
                                <li><a href="/board/category/1?page=0">스킨케어</a></li>
                                <li><a href="/board/category/8?page=0">클렌징</a></li>
                                <li><a href="/board/category/13?page=0">선케어</a></li>
                                <li><a href="/board/category/15?page=0">메이크업</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="ham-top-menu">
                        <li><a href="#">제품보기<i class="bi bi-caret-down-fill"></i></a>
                            <ul class="ham-sub-menu">
                                <li><a href="/item/category/1?page=0">스킨케어</a></li>
                                <li><a href="/item/category/8?page=0">클렌징</a></li>
                                <li><a href="/item/category/13?page=0">선케어</a></li>
                                <li><a href="/item/category/15?page=0">메이크업</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

css

.ham-con{
  width: 30%;
  height: 1000px;
  background-color: rgba(224, 224, 224, 0.8);
  position: fixed;
  top:70px;
  right:-20%;
  color:#505050;
  z-index: 99;
  opacity: 0;
}

.search-con{
  width: 100%;
  height: 50px;
  position: relative;
  top: 50px;
  margin-bottom: 80px;
  overflow: hidden;
}

.search-con input{
  width: 70%;
  height: 100%;
  float: left;
  line-height: 50px;
  border:1px solid black;
}

.ham-menu ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

.ham-menu ul.ham-top-menu li {
  position: relative;
  float: left;
  width: 100%;
  list-style-type: none;
  font-size: 18px;
}

.ham-menu ul.ham-top-menu li a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 50px;
  text-indent: 20px;
  color: #000;
  background-color: #fff;
  text-decoration: none;
}

.ham-menu ul.ham-top-menu li a:hover {
  background: #eee;
}

.ham-menu ul.ham-top-menu li .ham-sub-menu a {
  position: relative;
  float: left;
  display: block;
  width: 100%;
  z-index: 99;
  background: #F7F7F7;
}

.ham-menu ul.ham-top-menu li .ham-sub-menu a:hover {
  background: #444;
  color: #fff;
}

js

  $(".ham-menu ul.ham-top-menu li").each(function (index) {
    $(this).attr('data-index', index);
  });
  $(".ham-menu ul.ham-sub-menu").hide();
  $(".ham-menu ul.ham-top-menu li").click(function () {
    var index = $(this).attr('data-index', index);

      $("ul", this).slideToggle("fast");
      $("i",$(this)).toggleClass("bi-caret-down-fill bi-caret-up-fill");
      
  });