Bootstrap导航栏下拉菜单问题：关联错误与定位偏移修复咨询

Hey there! Let's get those two dropdown problems sorted out for your beer navigation bar. Here's what's going wrong and how to fix it:

Problem 1: Both Buttons Show the Same Dropdown Content #

The root issue here is that you've placed both dropdown buttons and their corresponding menus inside a single .dropdown container. Bootstrap's dropdown component will automatically target the first .dropdown-menu it finds within the same container, no matter which button you click.

Problem 2: Dropdowns Are Misaligned #

This is also tied to the single container setup. The dropdown menu is positioned absolutely relative to the parent .dropdown div, not the individual button. So it can't align correctly under each button.

The Fix: Separate Dropdown Containers #

We'll wrap each button and its matching menu in its own .dropdown container. This ensures each button triggers only its own menu, and the menu will align perfectly under its parent button. We'll also add proper ARIA attributes for accessibility, and adjust styling to keep all navigation buttons inline.

Here's the revised code with changes marked:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="~/styles/Stylesheet1.css"/>
<body>
<form id="form1" runat="server">
<div class="container">
<header>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="page-header">
<p class="text-center">
<asp:Image ID="logo" runat="server" Height="124px" Width="376px" ImageUrl="~/images/logo.jpg"/></p>
<p class="text-center">
<asp:Label ID="Label1" runat="server" Text="Beers, Loads of them !!!!!!" ></asp:Label></p>
</div>
<!-- Main navigation container -->
<div class="text-center">
<a href="index.aspx" class="btn btn-lg btn-primary" role="button">Home</a>

<!-- First dropdown: Irish Craft Beers (now in its own .dropdown container) -->
<div class="dropdown" style="display: inline-block; margin: 0 5px;">
<button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="irishDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Irish Craft Beers
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="irishDropdown">
<li class="dropdown-header">Ales</li>
<li><a href="#">Amber Ale</a></li>
<li><a href="#">Brown Ale</a></li>
<li><a href="#">Red Ale</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Classics</li>
<li class="disabled"><a href="#">Porter</a></li>
<li><a href="#">Stout</a></li>
<li><a href="#">Lager</a></li>
<li><a href="#">Rye</a></li>
<li><a href="#">Gluten-Free</a></li>
</ul>
</div>

<!-- Second dropdown: International Beers (now in its own .dropdown container) -->
<div class="dropdown" style="display: inline-block; margin: 0 5px;">
<button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="internationalDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
International Beers
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="internationalDropdown">
<li class="dropdown-header">European</li>
<li><a href="#">English</a></li>
<li><a href="#">German</a></li>
<li><a href="#">Danish</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Worldwide</li>
<li class="disabled"><a href="#">American</a></li>
<li><a href="#">Australian</a></li>
<li><a href="#">Asian</a></li>
<li><a href="#">Russian</a></li>
<li><a href="#">South Africa</a></li>
</ul>
</div>

<a href="specials.aspx" class="btn btn-lg btn-primary" role="button">Specials</a>
<a href="gifts.aspx" class="btn btn-lg btn-primary" role="button">Gifts</a>
<a href="homebrew.aspx" class="btn btn-lg btn-primary" role="button">Home Brew Kits</a>
<a href="contactus.aspx" class="btn btn-lg btn-primary" role="button">Contact Us</a>
</div>
</header>
</div>
</form>
</body>

Key Changes Made: #

• Split the single .dropdown container into two separate .dropdown containers, one for each button/menu pair. This ensures each button triggers only its own menu.
• Added style="display: inline-block; margin: 0 5px;" to each new .dropdown container so they sit inline with the other navigation buttons (Bootstrap 3's default dropdown is block-level).
• Added unique id attributes to each dropdown button (irishDropdown and internationalDropdown).
• Linked each dropdown menu to its button using aria-labelledby (matches the button's id) for better accessibility.
• Set aria-expanded="false" on buttons (default state, Bootstrap will toggle this automatically when clicked).

This should resolve both issues: each button will now show its own unique dropdown content, and each menu will align perfectly under its parent button.

内容的提问来源于stack exchange，提问作者Anthony O'Reilly