Question

我的导航工具栏中有两个下拉菜单。两个下拉菜单是：Irish Craft Beers和International beers。当我点击其中任何一个时，爱尔兰工艺啤酒和国际啤酒的下拉菜单是相同的。我如何区分其中两个，例如国际啤酒应使用国际啤酒下拉菜单。第二个问题是下拉菜单向左移动而不是直接在菜单下方下拉。我想在选择时将Irish Craft Beers下拉菜单置于Irish Craft Beers菜单下。对国际啤酒我也一样。

<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>

Answer 1

public static readonly DotvvmProperty ChangedProperty = DotvvmProperty.Register<Command, CategoryMenu>(c => c.Changed, null); public Command Changed { get => GetValue(ChangedProperty) as Command; set => SetValue(ChangedProperty, value); } public int SelectedItemId { get => (int)GetValue(SelectedItemIdProperty); set => SetValue(SelectedItemIdProperty, value); } public static readonly DotvvmProperty SelectedItemIdProperty = DotvvmProperty.Register<int, CategoryMenu>(c => c.SelectedItemId);和dropdown-toggle必须在dropdown-menu

内

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

对齐下拉菜单

1 个答案: