HTML下拉菜单异常：所有按钮均可触发且位置显示错误如何修复

预期点击Recipes按钮可打开包含2个选项的下拉菜单，目前已成功添加菜单，但存在两处问题：

• 下拉菜单显示在Recipes按钮右侧，位置不符合预期
• 尽管已为对应按钮单独设置class和id，点击任意按钮都会触发该下拉菜单展开

你添加的下拉菜单按钮组代码如下：

<div class="button-group special" id="dropdown">
        <button onclick="window.location.href='Home.html';"     class="button HomeButton"><span><b>Home</b></span></button>
        <button onclick="OpenRecipes()" class="button RecipesButton" id="dropbtn"><span><b>Recipes</b></span></button>
        <div class="recipes-content">
            <a href="ApplePie.html"><b> Apple Pie </b></a>
            <a href="BananaPie.html"><b> Banana Cream Pie </b></a>
        </div>
        <button onclick="window.location.href='Terms.html';"    class="button CookTermsButton"><span><b>Cooking Terms</b></span></button>
        <button onclick="window.location.href='Diet.html';"     class="button CookDietButton"><span><b>Cooking Light Diet</b></span></button>
        <button onclick="window.location.href='Contact.html';"  class="button ContactButton"><span><b>Contact Us</b></span></button>
</div>

故障截图：

问题1：点击任意按钮都触发下拉菜单展开 #

按优先级排查修复：

1. 检查下拉显示逻辑：如果是CSS实现的触发效果，确认你的触发选择器没有写为.button-group:active .recipes-content这类整组触发的规则，改为.RecipesButton:active + .recipes-content这类仅绑定Recipes按钮的规则；如果是JS实现的逻辑，确认显示/隐藏菜单的事件仅绑定到#dropbtn按钮，而非绑定到整个按钮组容器。
2. 如果是JS实现的OpenRecipes函数，在函数末尾添加event.stopPropagation()，阻止点击事件冒泡到上层容器，避免其他按钮的点击事件冒泡后误触发菜单显示。

问题2：下拉菜单位置错位显示在按钮右侧 #

修改CSS定位规则即可修复：

1. 给.RecipesButton添加position: relative属性，作为下拉菜单的定位父级
2. 给.recipes-content添加以下属性：

.recipes-content {
  position: absolute;
  top: 100%; /* 紧贴Recipes按钮底部 */
  left: 0; /* 和Recipes按钮左对齐 */
  z-index: 999; /* 避免被其他元素遮挡 */
}

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