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)

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.

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.

Here is the HTML code (stylesheet to follow):

Code:
<!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;