JSFiddle - React, Tailwind, and code Playground

HTML

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

SCSS

* {
  background-color: #546377;
}

nav {
  box-shadow: 5px 5px 10px #ccc;
  
  .navbar {
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(90deg, #3381b0, #c2196c);
    
    li {
      position: relative;
      background-color: transparent;
      
      a {
        background-color: transparent;
      }
    }
    
    li:hover > a {
      color: #fff;
    }
    
    ul {
      display: none;
      width: fit-content;
      position: absolute;
      flex-direction: column;
      top: 100%;
      right: 0;
      background-image: linear-gradient(0deg, #3381b0, #c2196c);
      box-shadow: 5px 5px 10px #ccc;
      
      a {
        color: #000;
      }
    }
    
    .about.open ul {
      display: flex;
    }
  }
}

a {
  text-decoration: none;
  color: #000;
  font-size: 24px;
}

JavaScript

const about = document.querySelector('.about');

function visible() {
	about.classList.toggle('open');
}

about.onclick = visible;