JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

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

CSS

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

.nav-ul{
  display: flex;
  justify-content: center;
  align-items: center;
}

li{
  padding: 1rem;
}

a{
  color: white;
  font-weight: bold;
}

a:hover,a:focus{
  color: #FFD93D;
}

.navbar{
  background-color: #262A56;
  box-shadow: 0px 0px 15px #4F4F4F;
}

.about{
  position: relative;
}

ul.item{
  margin-top: 1rem;
  position: absolute;
  overflow: auto;
  z-index: 1;
  width: 100px;
  display: none;
}

ul.item.show{
  display: block;
}

.item li{
  padding: 10px;
  background-color: #3c4187;
  color: white;
  text-align: center;
}

JavaScript

let item = document.querySelector(".item")

function down() {
  item.classList.toggle("show");
}