解决多按钮场景下下拉菜单均显示在首个按钮下方的问题

嘿，我一眼就看出问题出在哪啦！你把两个下拉按钮和它们对应的菜单内容都塞进了同一个.dropdown容器里——而这个容器是position: relative的，所有设置了position: absolute的.dropdown-content都会以这个父容器为基准来定位，难怪第二个菜单也跑到第一个按钮下面去了😅

简单修改方案：拆分独立的下拉容器 #

只需要调整你的HTML结构，把每个按钮和它对应的下拉内容分别放在独立的.dropdown容器里就好，JS和CSS完全不用改！

修改后的HTML代码：

<div class="dropdown">
  <button onclick="myFunction('myDropdown0')" class="dropbtn">Menu1</button>
  <div id="myDropdown0" class="dropdown-content">
    <a href="{% url 'App1:index' %}">choice1</a>
  </div>
</div>
<div class="dropdown">
  <button onclick="myFunction('myDropdown1')" class="dropbtn">Menu2</button>
  <div id="myDropdown1" class="dropdown-content">
    <a href="{% url 'App2:index' %}">Choice1</a>
    <a href="{% url 'App2:page2' %}">Choice2</a>
  </div>
</div>

为什么这样改有效？ #

每个.dropdown容器都是独立的position: relative元素，它内部的.dropdown-content（position: absolute）会自动以这个父容器的位置为基准来显示——也就是对应按钮的正下方，这样两个菜单就会各自跟着自己的按钮走啦。

你现在可以试试这个修改，应该就能解决问题了！

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