如何用HTML制作下拉菜单？ HTML下拉菜单实现步骤

<label for="city-select">选择你的城市：</label>
<select id="city-select" name="city">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen" disabled>深圳 (暂不可选)</option>
</select>

<nav class="dropdown-nav">
  <ul>
    <li>
      <a href="#">产品</a>
      <ul class="dropdown-menu">
        <li><a href="/product/a">产品A</a></li>
        <li><a href="/product/b">产品B</a></li>
        <li><a href="/product/c">产品C</a></li>
      </ul>
    </li>
    <li>
      <a href="#">服务</a>
      <ul class="dropdown-menu">
        <li><a href="/service/x">服务X</a></li>
        <li><a href="/service/y">服务Y</a></li>
      </ul>
    </li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>

.dropdown-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-nav > ul > li {
  position: relative; /* 确保子菜单定位 */
  display: inline-block; /* 让主菜单项横向排列 */
}

.dropdown-nav a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  background-color: #f8f8f8;
}

.dropdown-nav .dropdown-menu {
  display: none; /* 默认隐藏 */
  position: absolute;
  top: 100%; /* 放在父菜单项下方 */
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  min-width: 160px;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.dropdown-nav li:hover > .dropdown-menu {
  display: block; /* 鼠标悬停时显示 */
}

.dropdown-nav .dropdown-menu li a {
  padding: 8px 15px;
  color: #555;
}

.dropdown-nav .dropdown-menu li a:hover {
  background-color: #eee;
}

<label for="city-select-js">选择你的城市：</label>
<select id="city-select-js" name="city-js">
  <option value="">请选择</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<p id="selected-city-display">你选择的城市是：</p>

<script>
  const citySelect = document.getElementById('city-select-js');
  const displayParagraph = document.getElementById('selected-city-display');

  citySelect.addEventListener('change', function() {
    const selectedValue = this.value; // 获取选中option的value属性
    const selectedText = this.options[this.selectedIndex].text; // 获取选中option的文本内容

    if (selectedValue) {
      displayParagraph.textContent = `你选择的城市是：${selectedText} (值: ${selectedValue})`;
    } else {
      displayParagraph.textContent = `你选择的城市是：`;
    }
    // 实际应用中，你可能会将 selectedValue 发送到服务器，或者根据它更新页面内容
  });
</script>

<!-- HTML 结构同上，假设是 .dropdown-menu li a -->
<script>
  document.querySelectorAll('.dropdown-menu a').forEach(item => {
    item.addEventListener('click', function(event) {
      event.preventDefault(); // 阻止默认的链接跳转
      const selectedText = this.textContent;
      const selectedHref = this.getAttribute('href'); // 假设链接就是我们要的值

      console.log(`你点击了：${selectedText}，链接是：${selectedHref}`);
      // 可以在这里更新主菜单的显示文本，或者执行其他操作
      // 比如，关闭下拉菜单
      this.closest('.dropdown-nav').querySelector('.dropdown-menu').style.display = 'none';
      // 或者跳转页面
      // window.location.href = selectedHref;
    });
  });
</script>