Suckerfish menu issues

Hello,

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <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;*/
    padding:5px;
    text-decoration:none;
    width:100px;
    color:#eee;
    float:left;
    text-align:center;
    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;
        width:111px;
        margin-top: 28px;
        font-size: .9em;
        background-image: none;
        background-color: #303030;
}

        </style>
        <title>Navigation</title>
    </head>
    <body>
       <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>
                            <ul>
                               <li id="nested"><a href="#">product a</a></li>
			       <li id="nested"><a href="#">product b</a></li>
                            </ul>
                        </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>
                    </ul></div>
    </body>
</html>

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