Suckerfish menu issues


I am having a bit of trouble with the suckerfish menu :/. I’ve got everything working fine except for the nested menu under products. When i hover over the nested menu items I want them to change their highlight color but for some reason I just can’t figure it out :confused: If you could offer any suggestions that would be great.

Here is the source for the menu:

<?xml version="1.0" encoding="UTF-8"?>
To change this template, choose Tools | Templates
and open the template in the editor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            #nav {
    height: 38px;
    padding: 0;
    margin: 0;
    background-image: url(../images/nav-background.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
        background-color: #AA1B1B;


#nav a {
    display: block;
    /*width: 10em;*/
    border-left:1px solid #AA1B1B;
#nested a {
    border-style: none;
#home {
    margin-left: 25px;
#nav li { /* all list items */
	float: left;
	width: inherit; /* width needed or else Opera goes nuts */

#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
#nav li:hover {

    background-image: url(../images/nav-highlight.png);
    background-repeat: repeat-x;
    background-attachment: none;

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
        margin-top: 28px;
        font-size: .9em;
        background-image: none;
        background-color: #303030;

       <div class="clear span-24 last" id="nav"><ul id="list-nav">
                        <li id="home"> <a href="#">Home</a></li>
                        <li> <a href="#">Products</a>
                               <li id="nested"><a href="#">product a</a></li>
			       <li id="nested"><a href="#">product b</a></li>
                        <li> <a href="#">Company Blog</a></li>
                        <li> <a href="#">Store</a></li>
                        <li> <a href="#">FAQ</a></li>
                        <li id="list-nav-last"> <a href="#">Contact</a></li>

Never mind, I’ve been fighting with it for 3 hrs, and 10 min after I post I got it working. :slight_smile: