CSS dropdown - Son of Suckerfish

[beginnercss]

Hi,
I'm just a beginner of CSS and I am using Son of Suckerfish css drop down menu. But of course I have to do my own tweaking, once you hover on a menu item I want the background and font color to change. I have this working. Unfortunately when I move away from the menu and go back to it, the last item hovered has the correct background color, but the font color is if I was still hovering on that element.

Here is my code:
(Stylesheet)
#container{width:800px;margin:auto;font-size:11pt;}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 11pt;
text-decoration: none;

}
#nav a {
display: block;

}
#nav li {
float: left;
width: 110px;
text-align: left;
font-weight: bold;
background-image: url(testlink.jpg);
}

#nav li ul {
position: absolute;
width: 110px;
left: -999em;
background-image: none;
font-size: 10pt;
text-decoration: none;
}
#nav li ul li a{
background-image: none;
background: #FFFFFF;
text-decoration: none;
color: #007e2c;
border: solid #007e2c thin;
border-top:none;
}
#nav li ul li:hover a{
background: #007e2c;
color: #FFFFFF;
}
#nav li:hover ul a{
left: auto;
background: #FFFFFF;
color: #007e2c;
}
#nav li:hover ul, #nav li.sfhover ul a{
left: auto;
background: #007e2c;
color: #FFFFFF;
}
#nav {clear:both;height:10px;}


<div id="container">

<!--Top Link Bar-->
<ul id="nav">
<li><a href="index.html">&nbsp;Home</a></li>
<li>&nbsp;Menu Link
<ul>
<li><a href="link1.htm">Link 1</a></li>
<li><a href="link2.htm">Link 2</a></li>
<li><a href="link3.htm">Link 3</a></li>
<li><a href="link4.htm">Link 4</a></li>
<li><a href="link5.htm">Link 5</a></li>
</ul>
</li>
</ul>

<div class="clear"></div>
</div>

[TheJoshMan]

I can't recreate the problem you're speaking of using the code you posted.

Also, please wrap your code between [ code ] tags from now on. This makes it easier to navigate the post as well as to tell what is and/or isn't code.

Thanks.