Что я могу сделать, чтобы моя "HOME" ссылка на панели навигации была выбрана, когда пользователь находится на странице HOME?

Question

Я использую HTML5 и CSS3 в своем проекте MVC 3, и у меня возникают проблемы с панелью навигации.

Вот как моя панель навигации:

Розовое подменю появляется, когда пользователь наводит курсор на ссылки.И все это сделано с помощью CSS3 без JavaScript вообще.

Что я хочу сделать, так это то, что когда кто-то посещает мое веб-приложение "HEM", которое называется "HOME", оно должно автоматически выбираться, как на картинке.И когда пользователь переходит к тому, чтобы сказать «ADMIN», то же самое происходит там, розовое подменю всегда там.

Как я могу это сделать?

Это мой CSS:

ul#nav {
  position:relative;
  float: left;
  width: 961px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* gradient */
  background: url(../../Content/img/nav-tile.gif) repeat-x;  
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: right;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  margin: auto;
  padding: 0 35px;
}

/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #dd006b;  
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 961px;
  height: 30px;
  position: absolute;
  margin: 40px 0 0 0;
  /* gradient */
  background: #dd006b url(../img/menu-child.png) repeat-x;      
  background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e));
  background: -moz-linear-gradient(top,  #dd006b,  #a1014e);
  background: linear-gradient(-90deg, #dd006b, #a1014e); 
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 30px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 2 30px 0 0;
  background: #dd006b url(../img/menu-child.png) repeat-x;  
  background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e));
  background: -moz-linear-gradient(top,  #dd006b,  #a1014e);
  background: linear-gradient(-90deg, #dd006b, #a1014e);  
}

ul#nav li:hover > ul li a:hover {
  text-decoration: none;
  text-shadow: none;
}

и мой макет в MVC для "HEM" или "HOME" выглядит следующим образом:

<li>@Html.ActionLink("HEM","Index","Home")
<ul></ul>
</li> 

Заранее спасибо!

Answer 1

Я не знаю MVC3, но это возможно с помощью Javascript / jQuery. Вот пример использования jQuery: http://jsfiddle.net/MFhqW/

$('a[href="'+window.location.href+'"]').addClass('active');