Navigation Bar Styling with Css

Question

I have a few navigation bars on the top of my view. I'm using MVC 4 Razor View to design my layout. Right now I managed to get the navigation bar with hover effect but I need to do something more.

Right now this is what I have in my View.

By default I want to have the Home bar appeared as Orange color. And when user navigate to other bars Home bar will go back to normal and the selected bar will have the active styling.

Here's my styling in css.

ul.topnav
{
    display:table;
    list-style: none;
    padding: 0px 0px 0px 10px;
    margin: 0px 0px 0px 0px;
    width: 100%;
    text-align: left; 
    font-size: 1.2em; 
}
ul.topnav li
{
    width: auto;
    display:table-cell;
    margin: 0px 6px;
    padding: 0 15px 0 0;
}
ul.topnav li a
{
    margin: 0px 6px;
    border-top: 5px solid #CCC;
    padding: 0 15px 0 0;
    color: black;
    display: block;
    text-decoration: none;
}
ul.topnav li a:hover
{
    color: #eb8c00;
    border-top: 5px solid #eb8c00;
    margin: 0px 6px;
    padding: 0 15px 0 0;
    display: block;
}

And in my _Layout.cshtml, here's my code.

  <div id="app-top-navigation">
        <ul class="topnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
   </div>

Answer 1

Simply apply .active to the navigation item you require to be active.

HTML

<li><a href="#" class="active">Home</a></li>

CSS

ul.topnav li a.active { 
border-top: 5px solid orange; 
}