Adding a drop down horizontal menu to the ASP.NET MVC 2 template
I am wanting to add a menu look and operation similar to [this blog post][1]. I am not using HTML5 and I am not using CSS3. Also, I am a CSS n00b and don't really grasp what each tag does (or can do) so I feel like I am drowning here in understanding what to do. I have been scouring the net looking for an example of what I want to do and have had no luck beyond the link above. 

This is the "standard" ASP.NET MVC 2 template. We actually like the look for our internal applications. But the menu is something that needs help yet.

Here is what I have working so far:

![Current menu][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;
    }


  [1]: http://pietschsoft.com/post/2010/11/17/HTML5-Day-4-Add-DropDown-Menu-ASPNET-MVC-HTML5-Template-using-CSS-and-jQuery.aspx
  [2]: http://i.stack.imgur.com/l3EVa.png
Adding a drop down horizontal menu to the ASP.NET MVC 2 template
===

I am wanting to add a menu look and operation similar to [this blog post][1]. I am not using HTML5 and I am not using CSS3. Also, I am a CSS n00b and don't really grasp what each tag does (or can do) so I feel like I am drowning here in understanding what to do. I have been scouring the net looking for an example of what I want to do and have had no luck beyond the link above. 

This is the "standard" ASP.NET MVC 2 template. We actually like the look for our internal applications. But the menu is something that needs help yet.

Here is what I have working so far:

![Current menu][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;
    }


  [1]: http://pietschsoft.com/post/2010/11/17/HTML5-Day-4-Add-DropDown-Menu-ASPNET-MVC-HTML5-Template-using-CSS-and-jQuery.aspx
  [2]: http://i.stack.imgur.com/l3EVa.png