无法在菜单上激活a：active

我一直在努力使活动样式能够在我的CSS文件中工作。我看过我设计的以前使用它的网站，但看不到我当前网站上做错的事情。我希望菜单将当前正在查看的页面上的文本更改为#FFFFFF。重复进行多次尝试都没有成功。

HTML：

<div class="wrapper">

<header>
    <div class="logo">
        <a href="#"><img src="Images/Logo.jpg" alt="The Restaurant"></a>
    </div>
    <div class="menu">
        <nav>
            <ul>
                <li><a href="food.html">FOOD</a></li>
                <li><a href="#">WINE</a></li> 
                <li><a href="#">GALLERY</a></li> 
                <li><a href="#">ABOUT US</a></li> 
                <li><a href="#">RESERVATIONS</a></li> 
                <li><a href="#">GIFT VOUCHERS</a></li> 
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS：

        /* ===========================
       ======= CSS Reset ========= 
   =========================== */
    html, body, div, form, fieldset, img, legend, label, li, nav, ul{margin: 0; padding:     0;}
table{border-collapse: collapse; border-spacing: 0;}
th, td{text-align: left; vertical-align: top;}
h1, h2, h3, h4, h5, h6, th, td, caption {font-weight:normal;}
img {border: 0;}
p, h2{margin: 0;}

/* ===========================
   ======= Body style ======== 
   =========================== */
    html{
    background-color: #333333;
}

body{
    width: 100%;
    height: 100%; 
    margin: 0 auto; 
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
}

.wrapper{

}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
    text-decoration: none; 
    color: #999999;
}

a img {
    border: 0px; 
    text-decoration: none;}


 /* ===========================
    ========= Header ========== 
    =========================== */
header{
    background-color: #2B2B2B;
    min-width: 100%; 
    margin: 0px 0px 0px 0px;
    float: left;  
    height: 90px; 
}

.logo{
    background-color: #333333;
    height: 60px; 
    padding-left: 150px;    
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */
.menu{
    background-color: #333333;
}
.menu nav{
    float: left; 
    padding-left: 150px; 
    padding-bottom: 8px; 
    padding-top: 8px;   
}
.menu nav ul{
    list-style: none; 
}
.menu nav ul li{
    display: inline;     
    padding-right: 15px; 
}
.menu nav ul li a{
    padding-top: 5px; 
    padding-bottom: 5px;
}
.menu nav ul li a:hover{
    color: #FFFFFF;
}