dropdown UI

by dfg312546

HTML

<nav class="navStyle">
  <ul>
    <li class="navItems"><a class="linkStyle">首頁</a></li>
    <li class="navItems"><a class="linkStyle">全部商品</a></li>
    <li class="navItems"><a class="linkStyle">全部品牌</a></li>
    <li class="navItems" onmouseover="showDropdown()">
      <a class="linkStyle">關於我們</a>
      <ul class="dropdownContent" onmouseout="hideDropdown()">
        <li><a class="linkStyle">團隊介紹</a></li>
        <li><a class="linkStyle">企業宗旨</a></li>
        <li><a class="linkStyle">創業故事</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

body {
  margin: 0;
  padding: 0;
}

.navStyle {
  display: flex;
  justify-content: center;
  background-color:#E6C3C3;
  padding:15px;
  position: relative;
}

.navItems {
  font-weight: bold;
  display: inline-block;
  margin-left:15px;
  margin-right:15px;
}

.linkStyle:hover {
  color:#CD5C5C;
  cursor: pointer;
}

.dropdownContent {
  list-style: none;
  display: none;
  position: absolute;
  top: 100%;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}

.dropdownContent li {
  margin:10px;
  color:black;
}

JavaScript

function showDropdown() {
  const dropdownContent = document.querySelector('.dropdownContent');
  dropdownContent.style.display = 'block';
}

function hideDropdown() {
  const dropdownContent = document.querySelector('.dropdownContent');
  dropdownContent.style.display = 'none';
}