JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <ul class="nav">
    <li class="list symbol"onclick="btn()">首頁</li>
    <li class="list symbol" onclick="btn()">全部商品</li>
    <li class="list symbol" onclick="btn()">全部品牌
    <li class="list symbol" onclick="btn()">關於
       <ul class="about-content">
         <li>團隊介紹</li>
         <li>企業宗旨</li>
         <li>創業故事</li>
       </ul>
   </li>
  </ul>
</div>

CSS

*{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
}

.nav{
  display:flex;
  justify-content:space-around;
  background-color:rgba(0,0,0,0.2);
}

.nav li{
  list-style:none;
}

.nav .list{
  position:relative;
  width:25%;
  text-align:center;
  padding:10px;
  text-decoration:none;
  color:black;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s;
}

.nav .list:hover{
  background-color:#000;
  color:#fff;
}



.nav .symbol:after{
  content:"▼";
  padding:5px;
  position:absolute;
  right:10px;
  top:8px;
}
.nav .list_down:after{
  content:"▲";
  padding:5px;
  position:absolute;
  right:10px;
  top:5px;
}

.about-content{
  display:none;
  position:absolute;
  right:0;
  left:0;
  top:40px;
  background-color:rgba(0,0,0,0.2);
}

.about-content li{
  padding-top:5px;
  padding-bottom:3px;
  cursor:pointer;
}

.about-content li:hover{
  background-color:#000;
  color:#fff;
}

JavaScript

let list = document.querySelectorAll(".list");
let list_down = document.querySelectorAll(".list_down");
let symbol = document.querySelectorAll(".symbol");


function btn(){
	if(event.target.classList.contains("symbol")){
  	for(let i = 0; i < list.length; i++){
    	list[i].classList.add("symbol");
      list[i].classList.remove("list_down");
    }
  	event.target.classList.remove("symbol");
  	event.target.classList.add("list_down");
    event.target.children[0].style.display = "block";
  }
  else if(event.target.classList.contains("list_down")){
  	event.target.classList.add("symbol");
  	event.target.classList.remove("list_down");
    event.target.children[0].style.display = "none";
  }
  
 
  
}