如何为含食物与健身板块的菜单栏添加下拉列表？求实现代码

嘿，我来帮你搞定这个下拉菜单的需求！你现有的基础菜单结构已经搭好了，只需要补充HTML子菜单结构和CSS交互样式就能实现hover（或点击）显示下拉列表的效果。下面是具体的修改方案：

第一步：更新menu.php的HTML结构 #

给需要下拉的父菜单<li>添加子<ul>，用来存放下拉选项：

<link rel="stylesheet" href="menu.css/style.css">
<nav>
  <ul class="main-menu">
    <!-- 食物板块下拉菜单 -->
    <li class="Food dropdown">
      <a href="food.php">food</a>
      <!-- 下拉列表 -->
      <ul class="dropdown-menu">
        <li><a href="breakfast.php">早餐食谱</a></li>
        <li><a href="lunch.php">午餐推荐</a></li>
        <li><a href="snack.php">健康零食</a></li>
      </ul>
    </li>
    <!-- 健身板块下拉菜单 -->
    <li class="Exercise dropdown">
      <a href="exercise.php">exercise</a>
      <!-- 下拉列表 -->
      <ul class="dropdown-menu">
        <li><a href="strength.php">力量训练</a></li>
        <li><a href="cardio.php">有氧训练</a></li>
        <li><a href="yoga.php">瑜伽拉伸</a></li>
      </ul>
    </li>
  </ul>
</nav>

第二步：补充style.css的交互样式 #

添加以下CSS代码来控制下拉菜单的显示/隐藏，同时做一些基础美化：

/* 主菜单基础样式（如果已有可以不用重复） */
.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 让主菜单横向排列 */
  background-color: #f0f0f0;
}

.main-menu > li {
  position: relative; /* 给子菜单定位用 */
  padding: 10px 20px;
}

.main-menu a {
  color: #9b1414; /* 你原有的颜色 */
  text-decoration: none;
}

/* 下拉菜单默认隐藏 */
.dropdown-menu {
  position: absolute;
  top: 100%; /* 贴在父菜单下方 */
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: none; /* 默认隐藏 */
  min-width: 150px;
}

.dropdown-menu li {
  padding: 8px 15px;
}

/* 鼠标hover父菜单时显示下拉列表 */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* 下拉选项hover效果 */
.dropdown-menu a:hover {
  color: #ff4444;
  background-color: #f5f5f5;
}

可选：点击触发下拉（替代hover） #

如果你想要点击主菜单才显示下拉，而不是hover，可以添加一小段JavaScript代码到menu.php里：

<script>
// 获取所有下拉菜单父元素
const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
  dropdown.addEventListener('click', (e) => {
    // 阻止链接跳转（如果需要点击主菜单只展开不跳转）
    e.preventDefault();
    // 切换下拉菜单的显示状态
    dropdown.querySelector('.dropdown-menu').classList.toggle('show');
  });
});

// 点击页面其他地方关闭下拉菜单
document.addEventListener('click', (e) => {
  if (!e.target.closest('.dropdown')) {
    document.querySelectorAll('.dropdown-menu').forEach(menu => {
      menu.classList.remove('show');
    });
  }
});

然后修改CSS里的显示逻辑，把dropdown:hover .dropdown-menu替换成：

.dropdown-menu.show {
  display: block;
}

这样就可以实现点击主菜单展开/收起下拉列表的效果啦！

内容的提问来源于stack exchange，提问作者john d