CSS3實(shí)現(xiàn)導(dǎo)航下拉菜單的方法

CSS3可以用來制作各種樣式的導(dǎo)航下拉菜單，以下是一種簡(jiǎn)單的方法：

1、創(chuàng)建一個(gè)HTML結(jié)構(gòu)，包含導(dǎo)航菜單和子菜單項(xiàng)。

<nav>
  <ul>
    <li>菜單項(xiàng)1
      <ul>
        <li>子菜單項(xiàng)1</li>
        <li>子菜單項(xiàng)2</li>
      </ul>
    </li>
    <li>菜單項(xiàng)2
      <ul>
        <li>子菜單項(xiàng)3</li>
        <li>子菜單項(xiàng)4</li>
      </ul>
    </li>
  </ul>
</nav>

2、使用CSS3的樣式來設(shè)置導(dǎo)航菜單和子菜單的外觀。

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
}
nav ul li {
  position: relative;
  flex-grow: 1;
}
nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 10px;
  border-top: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

3、使用JavaScript（或純CSS）來響應(yīng)用戶點(diǎn)擊菜單項(xiàng)時(shí)顯示或隱藏子菜單，使用JavaScript：

document.querySelector('nav ul').addEventListener('click', function(event) {
  var clickedItem = event.target;
  var subMenu = clickedItem.querySelector('ul');
  if (subMenu) {
    subMenu.style.display = subMenu.style.display === 'none' ? 'block' : 'none';
    event.stopPropagation(); // 防止點(diǎn)擊事件冒泡到外層列表元素上
  }
});

這種方法可以實(shí)現(xiàn)基本的導(dǎo)航下拉菜單功能，你可以根據(jù)自己的需求進(jìn)行調(diào)整和優(yōu)化。