Show company information on hover

HTML

<nav>

  <ul class="navbar">

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

CSS

nav {
  box-shadow: 5px 5px 10px #ccc;
  background-color: yellow;

  .navbar {
    display: flex;
    justify-content: space-around;
    

    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;
      
      box-shadow: 5px 5px 10px #ccc;

      a {
        color: #000;
      }
    }

    .about.open ul {
      display: flex;
    }
  }
}

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

JavaScript

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

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