如何使<ul>进入下拉菜单？

Water Cooler v2 发表于 Dev

水冷却器v2

Visual Studio附带的ASP.NET MVC 5模板在_LoginPartial局部视图中创建此HTML。

看起来像这样：

<ul class="nav navbar-nav navbar-right">
    <li>
        <a href="#">@string.Format("Hello " + User.Identity.GetUserName() + "!")</a>
    </li>
    <li>
        @Html.ActionLink("Change password", "ChangePassword", "Account", routeValues: null, htmlAttributes: new { title = "Change Password" })
    </li>

    @{
        var o = Session["CurrentUserIsAdmin"];
        if (o != null)
        {
            var currentUserIsAdmin = (bool)o;

            if (currentUserIsAdmin)
            {
                <li>
                    @Html.ActionLink("Create New Admin User", "Register", "Account",
                    routeValues: null, htmlAttributes: new { title = "Create New Admin User" })
                </li>
            }
        }
    }
    <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>

它产生此：

我想更改它，以便：

1）导航栏中显示一个项目，例如First Item。

2）其余项目，即您当前在导航栏中看到的项目，即中的所有项目，<ul>应成为一个下拉菜单，该菜单也位于导航栏上，紧随First Item之后。

我不了解足够的CSS和引导程序来自己做。请你帮助我好吗？

最大限度

试试这个：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">First item</a>
        <ul class="dropdown-menu">
            <li>
                @string.Format("Hello " + User.Identity.GetUserName() + "!")
            </li>
            <li>
                @Html.ActionLink("Change password", "ChangePassword", "Account", routeValues: null, htmlAttributes: new { title = "Change Password" })
            </li>
            @{
                var o = Session["CurrentUserIsAdmin"];
                if (o != null)
                {
                    var currentUserIsAdmin = (bool)o;

                    if (currentUserIsAdmin)
                    {
                        <li>
                            @Html.ActionLink("Create New Admin User", "Register", "Account",
                            routeValues: null, htmlAttributes: new { title = "Create New Admin User" })
                        </li>
                    }
                }
            }
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
    </li>
</ul>