对齐下拉菜单答案

【问题标题】：Aligning dropdown menu对齐下拉菜单
【发布时间】：2018-01-05 16:13:37
【问题描述】：

我的导航工具栏中有两个下拉菜单。两个下拉菜单是：爱尔兰精酿啤酒和国际啤酒。当我单击其中一个时，爱尔兰精酿啤酒和国际啤酒的下拉菜单相同。我如何区分它们中的两个，例如国际啤酒应使用国际啤酒下拉菜单。第二个问题是下拉菜单向左移动，而不是直接在菜单下方下拉。我希望爱尔兰精酿啤酒下拉菜单在选择时位于爱尔兰精酿啤酒菜单下方。我希望国际啤酒也一样。

<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>
            <div class="dropdown text-center">
              <a href="index.aspx" class="btn btn-lg btn-primary" role="button">Home</a> 
              <button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Irish Craft Beers

                <!-- Display icon in button -->
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">

                <!-- Unselectable header -->
                <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>

                <!-- Seperates content in menu -->
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Classics</li>

                <!-- Disable menu element -->
                <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>
              <button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                International Beers

                <!-- Display icon in button -->
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">

                <!-- Unselectable header -->
                <li class="dropdown-header">European</li>
                <li><a href="#">English</a></li>
                <li><a href="#">German</a></li>
                <li><a href="#">Danish</a></li>

                <!-- Seperates content in menu -->
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Worldwide</li>

                <!-- Disable menu element -->
                <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>
              <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>

【问题讨论】：

标签： html drop-down-menu

【解决方案1】：

dropdown-toggle 和 dropdown-menu 必须在 <div class="btn-group">...</div> 内

你可以关注我的codepen：https://codepen.io/hieunguyen135/pen/BJwVaQ

【讨论】：