famms_dropdown.js

    <div class="h-top container">
      <img src="./img/logo.png" alt="logo">
      <nav>
        <ul>
          <li><a class="ul-color" href="#">HOME</a></li>
          <li id="menuList_pages"><a href="#">PAGES</a>
            <i class="fa-solid fa-caret-down down"></i>
            <ul id="subList" class="display_none">
              <li>About</li>
              <li>Testimonial</li>
            </ul>
          </li>
          <li><a href="#">PRODUCTS</a></li>
          <li><a href="#">BLOG</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="#"><i class="fa-solid fa-cart-shopping"></i></a></li>
          <li><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>

        </ul>
      </nav>
    </div>

//1. 셀렉트하기
let pages = document.querySelector("#menuList_pages");
let subList = document.querySelector("#subList");
console.log(pages);

//2.이벤트 할당하기
pages.addEventListener("click", showSubList);

let cnt = 0; //클릭 횟수

//3. 함수 선언하기
function showSubList(){
  //4. 함수 내부 코드 작성하기 
  cnt++; 
  if(cnt % 2 == 1){ //클릭횟수가 홀수
    subList.classList.remove("display_none");
  }else{ //클릭횟수가 짝수
    subList.classList.add("display_none");
  }

  console.log(cnt);
}

.h-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* header top img 사이즈와 마진값 주기 */
.h-top img {
  width: 250px;
  height: 43px;
  margin: 15px 20px 15px 20px;
}

/* header top nav 영역 */

/* flex 가로정렬하고 패딩, 마진값 주기 */
header nav > ul {
  display: flex;
  padding: 5px;
  margin: 10px
}
/* 폰트사이즈와 굵기설정 */
header nav > ul > li{
  font-weight: bold;
  font-size: 13pt;
  /* border: 1px solid red; */
}
/* a태그 패딩값주기 */
header nav > ul a {
  padding: 20px;
}
/* header nav 색상입히기 */
.ul-color {
  color: var(--main-color);
}
/* header nav li hover 줘서 커서 가져다갔을때 색상값주기 */
header nav li:hover {
  color: var(--main-color);
}

.hover-menu {
  position: relative;
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  padding: 20px;
  display: none;
}

.hover-menu:hover .sub-menu {
  display: block;
  color: white;
  border: 1px solid var(--main-color);
  background-color: pink;
  box-shadow: 5px 5px 20px 0 white;
}


/* down icon 위치조정 */
.down {
  font-size: 13px;
  margin-left: -15px;
}

/* 서브 리스트 위치 고정 */
#subList{
  width: 180px;
  position: absolute;
  top: 7%;
  left: 50%;
  z-index: 100;

  border: 2px solid black;
  background-color: white;
  margin: 0 10px;
  padding: 15px 25px;
  line-height: 2;
  box-shadow: 5px 5px;
}

/* 서브리스트 none값 주기 */
.display_none {
  display: none;
}

PAGES click 하면 dropdown menu 확인