我該怎麼做才能讓用戶在HOME頁面時選擇導航欄中的「HOME」鏈接？

Question

我在我的MVC 3項目上使用HTML5 & CSS3，我遇到了導航欄的問題。

這是我的導航欄如何：

出現粉紅色的子菜單，當用戶將鼠標懸停在鏈接。它的所有完成與CSS3沒有JavaScript。

我想要做的是當有人訪問我的web應用程序「HEM」這是「首頁」它應該自動選擇像圖片。當用戶導航到可以說「管理員」發生同樣的情況時，粉紅色子菜單總是在那裏。

我怎麼能做到這一點？

這是我的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」 又名 「家」 是以下幾點：提前

<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');