# [SOLVED] menu and jquery slideshow, menu behind slideshow



## Special2God (Oct 5, 2009)

I am creating a menu for the website of an organization I am volunteering with. 

The page is a css menu bar with a jQuery cycle slideshow plugin below it. 
I do not fully understand JQuery or the JQuery slideshow cycle plugin I am using. 

The JQuery slideshow cycle plugin was found here: JQuery Cycle Plugin
I am using JQuery v1.7, although previous versions also work (I've used 1.3.2 successfully with the slideshow plugin)

My problem is that the css menu is behind the slideshow. 
As the slideshow changes pictures you can see the menu for a moment behind the slideshow. 
I assume it may be a css z-index problem, but my weak attempts at making the css menu appear in front of the slideshow have not fixed the problem. 

I attached an image of what the page currently looks like when you hover over the menu. 
I was not sure if I should attach vs. CODE (sorry if I should have attached). 

Here's the html for the test page: 

```
<!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" xml:lang="en" lang="en">

<head>
<title>Test Menu and Image</title>
<link rel="stylesheet" type="text/css" href="navMenu.css" />

<!-- SlideShow Resources -->
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
	$('#s1').cycle({fx: 'fade', pager: '#pagerNav', timeout: 3000, autostop: 0});
});
</script>
<!-- End SlideShow Resources -->

</head>


<body>

<!-- start of horizontalMenu -->
<div id="horizontalMenu">

<ul>
<li><a href="#"> Main 1 </a></li>
<li><a href="#"> Main 2 </a>
	<ul>
	<li><a href="#"> Main 2 - Sub 1</a></li>
	<li><a href="#"> Main 2 - Sub 2</a>
		<ul>
		<li><a href="#"> Main 2 - Sub 2 - Sub Sub 1</a></li>
		<li><a href="#"> Main 2 - Sub 2 - Sub Sub 2</a></li>
		<li><a href="#"> Main 2 - Sub 2 - Sub Sub 3</a></li>
		</ul>
	</li>
	<li><a href="#"> Main 2 - Sub 3 </a>
		<ul>
		<li><a href="#"> Main 2 - Sub 3 - Sub Sub 1</a></li>
		<li><a href="#"> Main 2 - Sub 3 - Sub Sub 2</a></li>
		<li><a href="#"> Main 2 - Sub 3 - Sub Sub 3</a></li>
		</ul>
	</li>
	</ul>
</li>
<li><a href="#"> Main 3 </a>
	<ul>
	<li><a href="#"> Main 3 - Sub 1</a></li>
	<li><a href="#"> Main 3 - Sub 2</a></li>
	<li><a href="#"> Main 3 - Sub 3</a></li>
	</ul>
</li>
<li><a href="#"> Main 4 </a></li>
</ul>

</div>
<!-- end of horizontalMenu -->

<div style="clear: both; border: 2px solid #aaccff; font: 40px arial;" >Menu appears correctly over this element</div>

<!-- SlideShow -->
<div clas="slideshow">
	<div id="s1"> 

		<div style="display:none;">
		<a href="#" title="Image #1">
			<img src="image1.png" alt="Image1" width="540" height="300" border="0" usemap="#Map" title="Image One" /></a>
		</div>

		<div style="display:none;">
		<a href="#" title="Image #3">
			<img src="image2.png" alt="Image3" width="540" height="300" border="0" usemap="#Map" title="Image Three" /></a>
		</div>

	</div>
</div>
<!-- End SlideShow -->

</body>

</html>
```

And the css menu's css file: 

```
/* universal font and font-size */
* {
font-family: arial,tahoma,verdana,helvetica;
font-size: 12px;
}
/* universal attributes: margin, padding, and border */
ul, li, a {
	margin: 0;
	padding: 0;
	border: 0;
}
#horizontalMenu {
	margin: 0;
	padding: 0;
}
/* constant attributes for all ul elements: border, background, and list-style */
#horizontalMenu ul {
	margin: 0;
	padding: 0;
	background: white; /* all elements have white background */
	line-height: 30px; /* height of ul lines */
}
/* the horizontal menu */
#horizontalMenu li {
	margin: 0;
	padding: 0;
	border: 1px solid #dd1111;
	float: left; /* makes menu item lists verticle, uncomment to get horizontal menu item lists */
	list-style: none;
	position: relative; /* each drop down list is relative to it's parent li */
}
/* universal menu item link attributes */
#horizontalMenu ul li a {
	height: 30px;
	width: 150px;
	display: block;
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	text-align: center;
}
/* menu item list */
#horizontalMenu ul ul {
	position: absolute; /* give element absolute position below and ontop of parent element */
	top: 31px; /* this many pixels below parent element */
	left: -1px; /* to compensate for ul border */
}
/* menu item list item border */
#horizontalMenu ul ul li {
	border: 1px solid #11dd11;
}
/* menu item list item list */
#horizontalMenu ul ul ul {
	position: absolute;
	top: -1px; /* to compensate for ul ul border */
	left: 151px;
}
/* menu item list item list item border */
#horizontalMenu ul ul ul li {
	border: 1px solid #1111dd;
}
li a {
	width: auto;
}
/* regular hovers */
#horizontalMenu ul li:hover {
	border-color: #999999;
	color: black;
}
ul li:hover {
	background-color: #dd1111;
}
ul ul li:hover {
	background-color: #11dd11;
}
ul ul ul li:hover {
	background-color: #1111dd;
}

ul ul, li:hover ul ul {
	display: none;
}
li:hover ul, li:hover li:hover ul {
	display: block;
}
```


----------



## Laxer (Dec 28, 2010)

*Re: menu and jquery slideshow, menu behind slideshow*

Can you provide me a link to the page?

As for why this is occurring.... could be a couple things:

Z-index as you stated may be higher for the image then the menu thus throwing it behind it.
Javascript(jquery) may use absolute positioning to change the elements and this could be pulling it to the front.
Javascript(jquery) could be embedding the images and be naturally pulled to the front.

If you don't have the page online I can put it up on a temporary server to do the debugging.


----------



## Special2God (Oct 5, 2009)

*Re: menu and jquery slideshow, menu behind slideshow*

Thank you for responding so quickly, sorry about my delayed response. 
I do not have this menu/slideshow online, so I do not have a link. 
I did not think of absolute positioning, that could indeed be the problem. 

To get the page working you will need 

```
image1.png . . . . . . (attached)
image2.png . . . . . . (attached)
jquery.cycle.all.js . (web link in my first post)
jquery-1.7.js . . . . (found at[URL="http://docs.jquery.com/Downloading_jQuery"]jQuery[/URL])
navMenu.css . . . . . (source code in my first post)
slideshowmenu.html . . (source code in my first post)
```


----------



## Special2God (Oct 5, 2009)

*Re: menu and jquery slideshow, menu behind slideshow*

I found a fix to my menu/slideshow overlap problem. 
I added the following line to the css file: 

```
#horizontalMenu ul {
	z-index: 4;
	...
}
```
It was a simple fix, I should have tried it earlier... 
[SOLVED]


----------

