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!