JSFiddle - React, Tailwind, and code Playground

by tsaii

HTML

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

CSS

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  box-sizing: border-box;
}

.navbar {
  display: flex;
}

.navbar li {
  padding: 20px;
}

.navbar a {
  color: white;
}

.nav {
  background-color: black;
}

.about {
  position: relative;
}

.dropdown {
  display: none;
  margin-top: 20px;
  position: absolute;
  right: 3px;
  z-index: 1;
  width: 100px;
}

.dropdown li {
  padding: 10px;
  background-color: rgb(48 48 48 / 0.62);
  color: white;
  text-align: center;
}

.dropdown.show {
  display: block;
}

JavaScript

function dropDown(){
let show = document.querySelector('.dropdown')

show.classList.toggle('show')
}