将下拉水平菜单添加到 ASP.NET MVC 2 模板

Question

我想添加类似于 这篇博文。我没有使用 HTML5，也没有使用 CSS3。另外，我是 CSS n00b，并没有真正掌握每个标签的作用（或可以做什么），所以我觉得我在理解该做什么时陷入了困境。我一直在网上寻找我想做的事情的例子，但除了上面的链接之外没有运气。

这是“标准”ASP.NET MVC 2 模板。我们实际上很喜欢内部应用程序的外观。但菜单还需要帮助。

这是我到目前为止所做的工作：

HTML:

        <div id="menucontainer">
            <ul id="menu">
                <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                <li><%= Html.ActionLink("Sign Timesheet", "Index", "Timesheet") %></li>
                <li>
                    <%= Html.ActionLink("Leave Requests", "Index", "LeaveRequest") %>
                    <ul>
                        <li><%= Html.ActionLink("New Leave Request", "Create", "LeaveRequest")%></li>
                        <li><%= Html.ActionLink("Leave Request History", "History", "LeaveRequest") %></li>
                    </ul>
                </li>
                <%--<li><%= Html.ActionLink("About", "About", "Home")%></li>--%>
                <li><a href="#" target="_blank">NaviLine</a></li>
                <li><%= Html.ActionLink("Help", "Help", "Home") %></li>
            </ul>
        </div>

CSS:

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
}

ul#menu li a:hover
{
    background-color: #fff;
    text-decoration: none;
}

ul#menu li:hover ul
{
    display: block;
}

ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #fff;
    color: #000;
}

ul#menu li ul
{
    position: absolute;
    right: 0px;
    top:34px;
    display: none;
}

Answer 1

所需的细微调整是仅引用 #menucontainer 而不是 nav 的 HTML5 标记。在博客文章中，您需要调整样式表引用两次，并将 jquery 的第一行从 $("body nav li").each(function () { 调整为 $(" body #menucontainer li").each(function () { 。

希望这有帮助。

Answer 2

好吧，无论如何我尝试了这篇文章，发现只需进行一些小的调整就可以正常工作。