Nav submenu CSS, sprite issues

I’m TRYING to create subnavs that appear when you hover over the main nav-which is a sprite (will eventually need 3 subnavs, but was trying to “figure it out” on one of them first). I’ve been experimenting with the subnav for “christmas sweater FUN:”
—I’m using CSS & sprites (or at least “attempting” to!)
—subnav items SHOULD be “generator” and “timeline” (I gave up on “timeline” at some point last night—just trying to get “generator” to work)
—subnav SHOULD appear directly under “christmas sweater FUN” (vertically stacked subnav items)
—subnav SHOULD be red then turn to lime-green upon hover (using sprite)

In Dreamweaver, I FINALLY got “generator” to appear directly under “christmas sweater FUN” BUT, it’s showing both the red and lime-green versions at the same time (PROBLEM). And, to complicate matters further, when I look at this page in firefox the subnavs are COMPLETELY different than what I see in “Live View” in Dreamweaver. “generator” isn’t there at all (as opposed to where it was in Dreamweaver—directly under “christmas sweater FUN”). Instead there are 2 “submenus” all the way over to the RIGHT of the page that both say “christmas sweater FUN.” WHAT???

It seems like the subnav is showing up upon hover over the main nav, but it (the subnav) goes away when you move cursor off of main nav—so, the active state for the subnav doesn’t seem to be working at all (I think)…nor is the hover state working properly.

I’m at my wits end here…desperate for a solution and up against a deadline…I would be incredibly thankful for ANY help/sample code/direction you could provide…I don’t know what else to do with this at this point.

Here’s the link to see it in a browser:

http://www.christmassweaterfun.com/testing/index.html

Here’s how I currently have the sprite image set up: It is a gif file that is 540 x 86. Bottom half is the red subnav items (generator, timeline and advent calendar). Top half are same items with green background image. Each subnav item is laid out to be 167 px wide and 43px tall. (Should this also include the main nav item “christmas sweater FUN”?—I’ve been treating the nav and subnav as separate entities—is that incorrect?

Here is the HTML code (stylesheet to follow):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ChristmasSweaterFUN.com | Home of the Christmas Sweaterizer App & Christmas Sweater Generator</title> <style type="text/css"> <!-- #heading {    position:absolute;    left:103px;    top:13px;    width:800px;    height:103px;    z-index:1;    font-family: Verdana, Geneva, sans-serif;    font-size: 36px;    background-image: url(ChristmassweaterFUNlogo-WEBsite.gif);    background-repeat: no-repeat; } #bottombar {    position:absolute;    left:0px;    top:786px;    width:800px;    height:44px;    z-index:2; } #page-headline {    position:absolute;    left:0px;    top:120px;    width:800px;    height:40px;    z-index:3; } #machinearea {    position:absolute;    left:0px;    top:220px;    width:432px;    height:563px;    z-index:4;    background-repeat: no-repeat; } #funnypicplace {    position:absolute;    left:403px;    top:178px;    width:367px;    height:439px;    z-index:5; } #outputarea {    position:absolute;    left:433px;    top:220px;    width:367px;    height:564px;    z-index:5;    background-repeat: no-repeat;    font-family: "Courier New", Courier, monospace;    text-align: right;    font-size: 10px; } #apDiv4 {    position:absolute;    left:0px;    top:2px;    width:800px;    height:118px;    z-index:6;    text-align: center; } #headline {    position:absolute;    left:0px;    top:160px;    width:800px;    height:32px;    z-index:7;    padding-top: 14px;    padding-bottom: 14px;    vertical-align: middle; } #logoarea {    position:absolute;    left:0px;    top:10px;    width:800px;    height:84px;    z-index:1;    background-repeat: no-repeat;    background-image: url(ChristmassweaterFUNlogo-WEBsite.gif);    padding-bottom: 10px; } #headline2 {    position:absolute;    left:0px;    top:148px;    width:800px;    height:38px;    z-index:7;    background-image: url(TheChristmasSweaterGenerator.gif);    background-repeat: no-repeat; } #sharearea {    position:absolute;    left:662px;    top:26px;    width:128px;    height:18px;    z-index:1; } #bottomlinks {    position:absolute;    left:50px;    top:26px;    width:500px;    height:14px;    z-index:2;    color: #FFF;    font-family: "Courier New", Courier, monospace;    font-size: 14px; } #apDiv2 {    position:absolute;    left:540px;    top:752px;    width:367px;    height:18px;    z-index:1;    text-align: right;    font-family: "Courier New", Courier, monospace; } .copyright {    font-size: 10px; } --> </style> <!--[if lt IE 7]>  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript">  </script>  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7-squish.js" type="text/javascript">  </script> <![endif]--> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="logo"><img src="ChristmassweaterFUNlogo-WEBsite.gif" width="800" height="84" alt="Christmas Sweater FUN logo" /></div> <div id="navbar">   <ul id="navigation">     <li id="navigation-1"><a href="#home" title="home" class="current"><span>home</span></a></li>     <li id="navigation-2"><a href="#christmas_sweater-izer_APP" title="christmas sweater-izer APP"><span>christmas sweater-izer APP</span></a></li>     <li id="navigation-3"><a href="#christmas_sweater_FUN" title="christmas sweater FUN"><span>christmas sweater FUN</span></a>         <ul id="fun-sub">         <li id="generator"><a href="#christmas_sweater_FUN_generator" title="christmas sweater FUN generator"><span>christmas sweater generator</span></a></li>         <li id="timeline"><a href="#christmas_sweater_FUN_timeline" title="christmas sweater FUN timeline"><span>christmas sweater timeline</span></a></li>         </ul>     </li>        <li id="navigation-4"><a href="#blog" title="blog"><span>blog</span></a></li>     <li id="navigation-5"><a href="#shop" title="shop"><span>shop</span></a></li>     <li id="navigation-6"><a href="#about" title="about"><span>about</span></a></li>   </ul> </div> <div class="headline" id="headline"></div> <div id="machinearea"></div> <div id="outputarea"><img src="outputitems/output-spacer.png">   &copy; 2010 Christmas Sweater FUN. All rights reserved. </div>  <div id="bottombar"><img src="green-sweater-red-top-stripe.gif" width="800" height="54" alt="green christmas sweater bar" />     <div id="sharearea"><!-- AddThis Button BEGIN --> <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=trishaduck"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=trishaduck"></script> <!-- AddThis Button END --></div>     <div id="bottomlinks">Legal Stuff | Contact</div> </div> </div> </body> </html>

Here is the stylesheet code I have at the moment:
/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/


ul#navigation {
    width:800px;
    list-style:none;
    padding: 0;
}

ul#navigation li {
    display:inline;
margin: 0;
padding: 0;
position:relative;
}

ul#navigation li a {
    height:54px;
    float:left;
    text-indent:-9999px;
    text-decoration:none
}

ul#navigation  li a span {
    float:left;
    display:block
}

ul#navigation li#navigation-1 a {
    width:112px;
    background:url(../images/nav-3.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
    background-position:0px -54px
}
ul#navigation li#navigation-1 a.current {
    background-position:0px -108px
}

ul#navigation li#navigation-2 a {
    width:203px;
    background:url(../images/nav-3.jpg) no-repeat -112px 0
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
    background-position:-112px -54px
}
ul#navigation li#navigation-2 a.current {
    background-position:-112px -108px
}

ul#navigation li#navigation-3 a {
    width:167px;
    background:url(../images/nav-3.jpg) no-repeat -315px 0
}


ul#navigation li#navigation-3 a.current {
    background-position:-315px -108px
}

ul#navigation li#navigation-4 a {
    width:99px;
    background:url(../images/nav-3.jpg) no-repeat -482px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
    background-position:-482px -54px
}
ul#navigation li#navigation-4 a.current {
    background-position:-482px -108px
}

ul#navigation li#navigation-5 a {
    width:99px;
    background:url(../images/nav-3.jpg) no-repeat -581px 0
}

ul#navigation li#navigation-5 a:active,
ul#navigation li#navigation-5 a:hover {
    background-position:-581px -54px
}
ul#navigation li#navigation-5 a.current {
    background-position:-581px -108px
}

ul#navigation li#navigation-6 a {
    width:120px;
    background:url(../images/nav-3.jpg) no-repeat -680px 0
}

ul#navigation li#navigation-6 a:active,
ul#navigation li#navigation-6 a:hover {
    background-position:-680px -54px
}
ul#navigation li#navigation-6 a.current {
    background-position:-680px -108px
}#container {
    width: 800px;
    left: 0px;
    position: absolute;
    height: 850px;
}
#navbar #navigation {
}

a {outline:none;}
#navbar {
    padding: 0;
    margin: 0;
    width: 800px;
}

/*SUBNAV*/

#navigation li ul{
    display:none;
margin: 0;
padding: 0;
position:absolute;
left:-167px;
top:43px;
background:url(../images/fun_subnav.gif) no-repeat 0px, 0px;
}

#navigation li:hover ul
{
display:block;
width:167px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:167px;
}
    
#navigation li li#generator{
list-style:none;
display:list-item;
width:167px;
    background:url(../images/fun_subnav.gif) no-repeat 167px, 0;
}

#navigation li li#generator a:active,
#navigation li li#generator a:hover {
    background-position:  0px, -43px;
}

#navigation li li#timeline{
list-style:none;
display:list-item;
width:167px;
    background:url(../images/fun_subnav.gif) no-repeat 167px, 0;
}

#navigation li# ul li#timeline a:active,
#navigation li# ul li#timeline a:hover {
    background-position:167px, -43px;