如何使 <ul> 成为下拉菜单？答案

【问题标题】：How do I make a <ul> into a dropdown menu?如何使 <ul> 成为下拉菜单？
【发布时间】：2016-07-09 21:02:48
【问题描述】：

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> 中的所有项目应该成为一个下拉菜单，该菜单也位于导航栏之后第一项。

我对 CSS 和引导程序的了解不够，无法自己完成。你能帮帮我吗？

【问题讨论】：

标签： css asp.net-mvc twitter-bootstrap

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

尝试将<ul> 标记更改为<select> 标记并将<li> 标记更改为<option> 标记

【讨论】：