Active class not working

<!---- start Nav ---->	
<div class="menu">
    <ul>
        <li><a  href="http://www.naturediet.co.uk/" title="HOME">HOME</a></li>
<li><a   class="hide" href="http://www.naturediet.co.uk/products.html" title="PRODUCTS">PRODUCTS</a>
    <!--[if lte IE 6]>
    <a class="sub" href="http://www.naturediet.co.uk/products.html" title="PRODUCTS">PRODUCTS
    <table><tr><td>
    <![endif]-->

    <ul>
    <li><a  href="http://www.naturediet.co.uk/feedingguide.html" title="Interactive Feeding Guide">Interactive Feeding Guide</a></li>
<li class="last"><a  href="http://www.naturediet.co.uk/products2.html" title="Products">Products</a></li>

</ul>

    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

<li><a  href="http://www.naturediet.co.uk/stockists.html" title="STOCKISTS">STOCKISTS</a></li>
<li><a   class="hide" href="http://www.naturediet.co.uk/advice.html" title="ADVICE">ADVICE</a>

    <!--[if lte IE 6]>
    <a class="sub" href="http://www.naturediet.co.uk/advice.html" title="ADVICE">ADVICE
    <table><tr><td>
    <![endif]-->
    <ul>
    <li><a  href="http://www.naturediet.co.uk/adviceFAQ.html" title="FAQs">FAQs</a></li>
<li><a  href="http://www.naturediet.co.uk/advicefactsheets.html" title="Fact Sheets">Fact Sheets</a></li>
<li><a  href="http://www.naturediet.co.uk/adviceadultfeedingguide.html" title="Adult Feeding Guide">Adult Feeding Guide</a></li>
<li class="last"><a  href="http://www.naturediet.co.uk/advicepuppyfeedingguide.html" title="Puppy Feeding Guide">Puppy Feeding Guide</a></li>

</ul>

    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

</li>

<li><a   class="hide active" href="/index.php?q=news" title="NEWS">NEWS</a>
    <!--[if lte IE 6]>
    <a class="sub" href="/index.php?q=news" title="NEWS">NEWS
    <table><tr><td>
    <![endif]-->
    <ul>
    <li class="hide"><a  href="/index.php?q=current" title="Current News">Current News</a></li>
<li class="hide"><a  href="/index.php?q=archive" title="Archive">Archive</a></li>
<li class="hide"><a  href="/index.php?q=sponsored-news" title="Sponsored News">Sponsored News</a></li>
<li class="last hide"><a  href="/index.php?q=testimonials" title="Testimonials">Testimonials</a></li>

</ul>

    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

<li class="last"><a  href="http://www.naturediet.co.uk/contact.html" title="CONTACT">CONTACT</a></li>

    </ul>
</div>

.menu {
	width:750px;
	list-style:none;
	height:50px;
margin: 0;
padding: 0;
font-family: geneva;
}


/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;
}
/* style the links to be 113px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul  a, .menu ul  a:visited {
display:block; 
text-align:left; 
text-decoration:none; 
text-indent:5px;
width:113px; 
height:30px; 
color:#e1f5e7; 
/*border:1px solid #fff;
border-width:1px 1px 0 0;  */
background:#7fb790;  
line-height:30px; 
margin: 10px 3px 0px 8px;
}



.menu li a {
font-size: 13.5px;
}





/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#e1f5e7; 
background: #7fb790 url(paw.png);
}






/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:40px; 
left:0; 
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block; 
background:#7fb790; 
color:#fff;
margin-left: 7px;
margin-top: 0px;
margin-bottom: 0px;
border: 1px solid #fff;
font-size: 10px;
width: 150px;

}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#007e3e; 
color:#fff;
border: 1px solid #fff;
margin-left: 7px;
margin-top: 0px;
margin-bottom: 0px;

}


.active {
font-size: 13.5px;
background: url(paw_white.png);
}

[[Wayfinder? &startId=`85` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_basicdd`]]

<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/basic_dd.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/basic_dd_ie.css" />
<![endif]-->
<!--[if gte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/basic_dd_ie7.css" />
<![endif]-->

<ul>
    [+wf.wrapper+]
</ul>

<div[+wf.classes+]>
    <ul>
        [+wf.wrapper+]
    </ul>
</div>

<li><a  [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
    <table><tr><td>
    <![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

<li[+wf.classes+]><a  href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

.active {
background:transparent url(paw_white.png) !important;
font-size:13.5px;
}

//get user class definitions
$wf->_css = array(
	'first' => isset($firstClass) ? $firstClass : '',
	'last' => isset($lastClass) ? $lastClass : 'last',
	'here' => isset($hereClass) ? $hereClass : 'active', <=== here we go
	'parent' => isset($parentClass) ? $parentClass : '',
	'row' => isset($rowClass) ? $rowClass : '',
	'outer' => isset($outerClass) ? $outerClass : '',
	'inner' => isset($innerClass) ? $innerClass : '',
	'level' => isset($levelClass) ? $levelClass: '',
	'self' => isset($selfClass) ? $selfClass : '',
	'weblink' => isset($webLinkClass) ? $webLinkClass : '',
);

TABLE {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
.menu UL LI A.hide {
	DISPLAY: none
}
.menu UL LI A.hide:visited {
	DISPLAY: none
}
.menu UL LI A:hover {
	COLOR: #fff;
	BACKGROUND: #faeec7; 

}
.menu UL LI A:hover UL {
	DISPLAY: block; LEFT: 0px; WIDTH: 113px; POSITION: absolute; TOP: 32px
}
.menu UL LI A:hover UL LI A {
	BACKGROUND: #faeec7; 
	COLOR: #ffffff;
}
.menu UL LI A:hover UL LI A:hover {
	BACKGROUND: #dfc184; 
	COLOR: #ffffff;
}