Stubborn Sprite Stacking

[imanbushara]

Afternoon!

I've decided to switch our website's dropdown menu icons into sprites for faster pageloading but I'm having a finishing touch issue. The sprites are somehow showing up behind the background color of the <li>'s and thus hidden. I've tried tweaking the z-index but they remain in the back. Any thoughts on known stacking issues or background-color/background url conflicts?

Here's the css:


* {
margin: 0;
padding: 0;
}

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: small;
}

h1, h2, h3, h6 {
margin-bottom: 10px;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000000;
}

h4 {
margin-bottom: 10px;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #FFFFFF;
}

h5 {
margin-bottom: 10px;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #58b6dd;
}

h1 { font-size: 2em; }
h2 { font-size: 2em; }
h3 { font-size: 1.4em; font-weight: normal;}
h4 { font-size: 2em; }
h5 { font-size: 2em; }
h6 { font-size: 1.2em; }


p, blockquote, ul, ol {
margin-bottom: 1.5em;
line-height: 1.8em;
}

blockquote, ul, ol {
margin-left: 3em;
}

blockquote {
margin-right: 3em;
}

a {
color: #0065CC;
}

a:hover {
text-decoration: none;
color: #CC0000;
}

img { border: none; }

img.left {
float: left;
margin: 0 15px 15px 0;
display: inline;
}

img.right {
float: right;
margin: 0 15px 0 15px;
display: inline;
}

hr { display: none; }

.hr {
height: 36px;
margin-bottom: 15px;
background: url(images/img06.gif) repeat-x left center;
}

.welcome {
text-align:justify;
}

.welcomeh {
text-align:center;
}

#photodiv {
background-repeat: no-repeat;
}

/* Transparency see http://www.mandarindesign.com/opacity.html*/

div.transON {
width: 100%;
}

div.transOFF {
width: 100%;
opacity:.50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}


/* Header */

#header {
width: 700px;
height: 100px;
margin: 0 auto;
}

#headerticker {
width: 700px;
height: 15px;
margin: 0 auto;
text-align: right;
}

.trleft {
width:240px;
}

.trright {
width:460px;
}


#logo {
float: left;
width: 240px;
height: 100px;
text-align: center;
color: #FFFFFF;
}


#logo h1 {
margin: 0;
font-size: 2.6em;
}

#logo h2 {
font-size: 1em;
}

#logo a {
text-decoration: none;
color: #333333;
}


/* Menu */

#menu {
float: right;
width: 460px;
height: 50px;
background: #58b6dd url(images/img01.gif) no-repeat left bottom;
}

#menu ul {
margin: 0;
padding-top: 60px;
text-align: center;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
padding: 0 20px;
border-left: 1px solid #FFFFFF;
text-decoration: none;
font-weight: bold;
color: #ffffff;
}

#menu a:hover {
text-decoration: underline;
}

#menu .first a {
border: none;
}

/* Page */

#page {
width: 700px;
margin: 0 auto;
background: url(images/img03.gif) repeat-y;
}

#pagetop {
width: 700px;
margin: 0 auto;
}

/* Content */

#content {
float: right;
width: 420px;
padding: 20px;
}

/* Sidebar */

#sidebar {
float: left;
width: 200px;
padding: 60px 20px 20px 20px;
background: url(images/img02.gif) no-repeat;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 20px;
}

#sidebar li ul {
list-style: disc inside;
}

#sidebar li li {
margin: 0;
}

#sidebar dl {
}

#sidebar dt {
}

#sidebar dd {
margin-bottom: 10px;
}

#sidebar ol {
margin-left: 0;
list-style-position: inside;
}

#sidebar h2 {
margin-bottom: 20px;
padding-bottom: 10px;
background: url(images/img05.gif) repeat-x left bottom;
color: #000000;
}

#sidebar h4 {
margin-bottom: 20px;
padding-bottom: 10px;
background: url(images/img05.gif) repeat-x left bottom;
color: #FFFFFF;
}

#sidebar blockquote {
margin-left: 0;
margin-right: 0;
}

#sidebar a {
color: #ffffff;
}

/* Footer */

#footer {
width: 700px;
margin: 0 auto;
padding: 10px 0;
background: url(images/img06.gif) repeat-x;
border-top: 1px solid #FFFFFF;
font-size: small;
text-align:center;
}


#footer p {
margin: 0;
line-height: normal;
color: #999999;
font-size: x-small;
}

#footer a {
color: #999999;
}


/* Begin CSS Drop Down Menu */


#menuh-container
{
width: 460px;
height: 45px;
font-weight: normal;
float: right;
background-color: #58b6dd;
}

#menuh
{
font: normal 10px Trebuchet MS;
width:459px;
float: none;
margin:2em;
margin-top: 2em;
}


#menuh a
{
text-align: center;
display:block;
border: 1px solid #BBB;
white-space:nowrap;
margin:0;
padding: 0.3em;
}

#menuh a, #menuh a:visited /* menu at rest */
{
color: #58b6dd;
background-color: white;
text-decoration:none;
border: 1px groove #BBB;
}

#menuh a:hover /* menu at mouse-over */
{
color: white;
background-color: #58b6dd;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:6em; /* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
z-index:500;
}

#menuh ul ul
{
position:absolute;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
width:12em;
}

#menuh ul ul ul
{
top:0;
left:100%;
width:12em;
background-image:none;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}


/* End CSS Drop Down Menu */


/* navigation sprites starts*/

#sprites ul {
background: url('csg-4a045c34e58ea.png') no-repeat;
background-position: 15px;
position:relative;
z-index:1000;
}

#sprites.sprite-01 { background-position: 0 -10px; }
#sprites.sprite-02 { background-position: 0 -55px; }
#sprites.sprite-03 { background-position: 0 -100px; }
#sprites.sprite-04 { background-position: 0 -145px; }
#sprites.sprite-05 { background-position: 0 -190px; }
#sprites.sprite-06 { background-position: 0 -235px; }
#sprites.sprite-07 { background-position: 0 -280px; }
#sprites.sprite-08 { background-position: 0 -325px; }
#sprites.sprite-09 { background-position: 0 -370px; }
#sprites.sprite-10 { background-position: 0 -415px; }

/* navigation sprites ends*/


#category
{
height: 75px;
width: 210px;
font-weight:bold;
}

/* Lightbox Begins */

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(images/overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
}


/* Lightbox Ends */

.callout {
font-weight:bold;
color:#CC0000;
}

.privatelabel {
text-align:justify;
}

and the link:

http://www.imbibeinc.com/tester.html

The sprites are there because when I remove the background color I can see them...they're just hiding from me! The sprites are supposed to be under the Product menu only; the root URL shows the desired result. Any help would be appreciated! :D