title: Adding a drop down horizontal menu to the ASP.NET MVC 2 template
body: <p>I am wanting to add a menu look and operation similar to <a href="http://pietschsoft.com/post/2010/11/17/HTML5-Day-4-Add-DropDown-Menu-ASPNET-MVC-HTML5-Template-using-CSS-and-jQuery.aspx" rel="nofollow noreferrer">this blog post</a>. 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. </p>
  
  <p>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.</p>
  
  <p>Here is what I have working so far:</p>
  
  <p><img src="https://i.stack.imgur.com/l3EVa.png" alt="Current menu"></p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;div id="menucontainer"&gt;
              &lt;ul id="menu"&gt;
                  &lt;li&gt;&lt;%= Html.ActionLink("Home", "Index", "Home")%&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%= Html.ActionLink("Sign Timesheet", "Index", "Timesheet") %&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;%= Html.ActionLink("Leave Requests", "Index", "LeaveRequest") %&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;%= Html.ActionLink("New Leave Request", "Create", "LeaveRequest")%&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;%= Html.ActionLink("Leave Request History", "History", "LeaveRequest") %&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;%--&lt;li&gt;&lt;%= Html.ActionLink("About", "About", "Home")%&gt;&lt;/li&gt;--%&gt;
                  &lt;li&gt;&lt;a href="#" target="_blank"&gt;NaviLine&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;%= Html.ActionLink("Help", "Help", "Home") %&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* 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;
  }
  </code></pre>