JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="main-menu">
    <li class="main-menu-li"><a href="">首頁</a></li>
    <li class="main-menu-li"><a href="">全部商品</a></li>
    <li class="main-menu-li"><a href="">全部品牌</a></li>
    <li class="main-menu-li">
      <span>關於我們</span>
      <ul class="sub-menu">
        <li><a href="">團隊介紹</a></li>
        <li><a href="">企業宗旨</a></li>
        <li><a href="">創業故事</a></li>
      </ul>
    </li>
  </ul>
</nav>

<h1 style="text-align: center;">JavaScript 系列三：練習6 ── dropdown 下拉式選單</h1>

CSS

* {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav {
  width: 100%;
  text-align: center;
  background-color: #000;
}

nav .main-menu {
  font-size: 0;
}

nav .main-menu-li {
  display: inline-block;
  position: relative;
}

nav .sub-menu {
  font-size: 0;
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background-color: #000;
}

nav .sub-menu.active {
  display: block;
}

nav a,
nav span {
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
  color: #fff;
  transition: 0.3s;
  cursor: pointer;
  font-size: 16px;
}

nav a:hover,
nav span:hover {
  background-color: rgba(255, 234, 208, 1);
  color: #000;
}

JavaScript

let mainMenuLis = document.querySelectorAll(".main-menu-li");
for (let mainMenuLi of mainMenuLis) {
  mainMenuLi.onclick = showSubMenu;
}
window.onclick = closeSubMenu;

function showSubMenu() {
  let clickedMenu = event.target;
  let mainMenu = clickedMenu.closest(".main-menu-li");
  let subMenu = mainMenu.querySelector(".sub-menu");
  subMenu.classList.toggle("active");
}

function closeSubMenu() {
  let activeSubMenu = document.querySelector(".sub-menu.active");
  if (activeSubMenu) {
    let subMenuStarter = activeSubMenu.previousElementSibling;
    if (event.target !== subMenuStarter) {
      activeSubMenu.classList.remove("active");
    }
  }
}