Навигационная панель Styling with Css

Question

У меня есть несколько навигационных панелей в верхней части моего окна. Я использую MVC 4 Razor View для разработки моего макета. Прямо сейчас мне удалось получить панель навигации с эффектом зависания, но мне нужно сделать что-то еще.

Прямо сейчас это то, что у меня есть в моем представлении.

По умолчанию я хочу, чтобы панель «Главная» появилась как оранжевый цвет. И когда пользователь перейдет к другим барам, верхняя панель вернется в нормальное состояние, и выбранная полоса будет иметь активный стиль.

Вот мой стиль в 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; 
} 

И в моем _Layout.cshtml, вот мой код.

<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

Просто нанесите .active для элемента навигации вам требуется, чтобы быть активным.

HTML

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

CSS

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