CSS using z-index to put jQuery menu under header image

I am trying to put the jQuery menu here http://forms.techinc.org/float/index.html under the header with z-index in the CSS. I can get the menu to go under but the menu stops working completely or at least acts really screwy.

I can't figure out what I am doing wrong, please help.

/* slidy.css */

/*
 Author: Bob Stone
*/
 
body, p, td, th, ul, h1, h2, h3, disclaim, subhead
     {font-family: century gothic;}

body
     {color:#000; font-size:16px; margin-left:0px; margin-right:0px; 
     margin-top:0px; margin-bottom:0px; PADDING-BOTTOM: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
     PADDING-TOP: 0px;}

#header { 
	height:135px; 	
	margin: 0 auto;
	width: 1025px;
	z-index: 52; 
}
#moo { 
/* 	z-index: -1;
  	position: absolute;     - works but screws up menu */
}
#main { 
	width: 1025px;
	margin: 0 auto;
	padding: 150px 50px 0 50px;
}
/* Menu */
	#menu {

		list-style:none;	
		padding:0 0 0 200px;
		height:180px;
		width:700px;
		display: block ;
		position:absolute;
	}
	
		#menu li {
			float:left;
			width:109px;
			height:inherit;
			position:relative;
			overflow:hidden;
		}

		#menu li a  { 
			color: #fff;
			font-family: Arial;
			position:absolute;
			top:0px;
			padding: 38px 0 0 15px;
			background:url(menu.png) no-repeat 0 0;
			display:block; 
			width:109px; 
			height:inherit;
			text-decoration: none;

	}
/* Menu end */

h2 { 
	font-size: 13pt; 
}

Open in new window

LVL 9
Bob StoneIT GuruAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
For z-indexes to work properly they have to have either an absolute position or a fixed position.  
Your header is positioned relatively, which will kill the z-index right away.
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery Floating Menu</title>
<style> 
/*
 Author: Bob Stone
*/
 
body, p, td, th, ul, h1, h2, h3, disclaim, subhead
     {font-family: century gothic;}

body
     {color:#000; font-size:16px; margin-left:0px; margin-right:0px; 
     margin-top:0px; margin-bottom:0px; PADDING-BOTTOM: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
     PADDING-TOP: 0px;}

#header {
	height:135px;
	margin: 0 auto;
	width: 1025px;
	z-index: 52;
	position: absolute;
	top: 0px;
}
#wrapper {
	margin: 0px auto;
	width: 1025px;
}
#moo { 
/* 	z-index: -1;
  	position: absolute;     - works but screws up menu */
}
#main {
	width: 1025px;
	margin: 0 auto;
	padding: 250px 50px 0;
}
/* Menu */
	#menu {
	list-style:none;
	padding:0 0 0 200px;
	height:180px;
	width:700px;
	display: block;
	position:absolute;
	top: 150px;
	}
	
		#menu li {
			float:left;
			width:109px;
			height:inherit;
			position:relative;
			overflow:hidden;
		}

		#menu li a  { 
			color: #fff;
			font-family: Arial;
			position:absolute;
			top:0px;
			padding: 38px 0 0 15px;
			background:url(http://forms.techinc.org/float/menu.png) no-repeat 0 0;
			display:block; 
			width:109px; 
			height:inherit;
			text-decoration: none;

	}
/* Menu end */

h2 { 
	font-size: 13pt; 
} 
</style>
<script type="text/javascript" src="http://forms.techinc.org/float/js/jquery-1.3.1.min.js"></script>
	<script type="text/javascript" src="http://forms.techinc.org/float/js/jquery.easing.1.3.js"></script>
	<script>
		$(document).ready(function () {

		//get the default top value
		var top_val = $('#menu li a').css('top');

		//animate the selected menu item
		$('#menu li.selected').children('a').stop().animate({top:30}, {easing: 'easeOutQuad', duration:500});		

		$('#menu li').hover(
			function () {
				
				//animate the menu item with 0 top value
				$(this).children('a').stop().animate({top:30}, {easing: 'easeOutQuad', duration:500});		
			},
			function () {

				//set the position to default
				$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});		

				//always keep the previously selected item in fixed position			
				$('#menu li.selected').children('a').stop().animate({top:30}, {easing: 'easeOutQuad', duration:500});		
			}		
		);
	
	});
	
	</script>

	
</head>
<body>
<div id="wrapper"> 
<div id="header">
<img src="http://forms.techinc.org/float/images/bg_top.png">
</div> 
<div id="moo">
<ul id="menu">
	<li class="selected" ><a href="#"><h2>Home</h2></a></li>
	<li><a href="#"><h2>Unlimited Plan</h2></a></li>
	<li><a href="#"><h2>Phones</h2></a></li>

	<li><a href="#"><h2>Coverage</h2></a></li>
	<li><a href="#"><h2>About Us</h2></a></li>
	<li><a href="#"><h2>Contact Us</h2></a></li>
</ul>
</div>
</div><!--end wrapper -->
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut lacus id turpis pellentesque imperdiet sed at purus. Maecenas gravida, eros ut imperdiet rhoncus, elit leo pulvinar mauris, vel ullamcorper enim nunc eu est. Curabitur purus odio, eleifend in porttitor et, venenatis ut massa. Quisque condimentum, arcu non ultricies facilisis, ligula purus tincidunt dui, in scelerisque nibh sem vel mauris. Suspendisse iaculis aliquam metus eu auctor. Fusce nunc nisi, dignissim vitae dictum rutrum, venenatis sed sapien. Integer sit amet tincidunt justo. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin a fringilla risus. In iaculis euismod eleifend. 

Suspendisse hendrerit fringilla est, eget lacinia massa fermentum vitae. Praesent in turpis ligula. Vestibulum a neque magna. Suspendisse urna erat, vulputate id condimentum ut, ultrices quis libero. Cras a nisl magna, sit amet elementum risus. Suspendisse lobortis velit ac purus luctus venenatis. Nullam dictum ullamcorper lacus, ut condimentum augue aliquet in. Donec nec orci ligula. Aliquam sit amet velit dolor, in ultricies tellus. Mauris lacinia, ante sit amet porttitor adipiscing, justo justo laoreet erat, nec pulvinar mauris massa quis massa. In in elit ac justo pellentesque iaculis sed nec lorem. Phasellus tincidunt eleifend bibendum. In ut erat quis nibh gravida aliquam at non turpis. Mauris scelerisque consectetur arcu eu ultricies. 
</div>

<br><br><br>

</body>
</html>

Open in new window

0
remorinaCommented:
Try adding a position:relative to the #header css class

As LZ1 mentioned, a z-index is pretty useless without a position:relative or absolute
#header {
height:135px;
margin:0 auto;
position:relative;
width:1025px;
z-index:52;
}

Open in new window

0
Bob StoneIT GuruAuthor Commented:
Like I said, I can get the menu to go under the background image, but the menu stops working completely in FF or acts really screwy in IE.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Bob StoneIT GuruAuthor Commented:
I have it set that way now, take a look.
0
LZ1Commented:
Kill the z-index for #moo and make the #header z-index 1.
Then set the z-index for #menu to 100
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob StoneIT GuruAuthor Commented:
That did it! Thanks. =o)

Apparently I don't understand z-index numbers though, I thought the higher number meant it was on top.
0
Bob StoneIT GuruAuthor Commented:
Thanks =o)
0
LZ1Commented:
The higher number does mean it's on top.  However, remember the absolute positioning and also that everything your layering should have a z-index assigned.
0
Bob StoneIT GuruAuthor Commented:
Thanks, I will keep that in mind.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.