JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="nav">
    <li><a href="#">首頁</a></li>
    <li><a href="#">全部商品</a></li>
    <li><a href="#">全部品牌</a></li>
    <li><a href="#" id="about">關於我們</a>
      <ul class="dropdown">
        <li><a href="#">團隊介紹</a></li>
        <li><a href="#">企業宗旨</a></li>
        <li><a href="#">創業故事</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

*{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
nav .nav{
  display:flex;
  justify-content: space-around;
  padding: 5px 100px;
  background-color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  background-color: #1c59c1;

}
a{
  text-decoration: none;
  display: inline-block;
  color: #fff;
  cursor: pointer;
}
a:hover{
  color:#061245;
}
#about{
  position: relative;
}
.dropdown{
  margin-top: 8px;
  padding:5px 3px;
  display: none;
  flex-direction: column;
  position: absolute;
  z-index: 1;
  background-color: #936c9c;
  border: #404040 1px solid;
}
.dropdown li{
  border-bottom: #404040 1px solid;
}
.show{
  display: flex;
}

JavaScript

var about=document.querySelector("#about");
var dropdown=document.querySelector(".dropdown");
about.onclick=open;
window.onclick=close;

function open(){
  dropdown.classList.toggle("show");
}
function close(){
  //意思是下拉選單中的 class名稱不包含 show 且作用的元素不是 about 才執行以下程式碼刪除 show
  if(dropdown.classList.contains("show") && event.target != about){
    dropdown.classList.remove("show");
  }
}