ultimate fade in and css menus

[buzuc]

Script :Ultimate Fade-in slideshow (v1.5)
http://www.dynamicdrive.com/dynamici...nslideshow.htm

Hi there, I just installed The "Ultimate Fade-in slideshow (v1.5)" on my test site and it works great

My problem is that I have also a CSS generated menu on my page and it don't work anymore.

Here is the HTML code of the menu :

<td id="Collection" width=100>
    <ul id="nav">
            <li><span id="Collection">&nbsp;</span>
	           <ul>
		          <li id="necklaces"><a class="necklaces" href="necklaces.php"><span>Necklaces</a></span></li>
		          <li id="earrings"><a class="earrings" href="earrings.php"><span>Earrings</a></span></li>
		          <li id="bracelets"><a class="bracelets" href="bracelets.php"><span>Bracelets</a></span></li>
		          <li id="rings"><a href="rings.php"><span>Rings</a></span></li>
	           </ul>
            </li>
        </ul></td>

and here is the CSS definition :

#nav, #nav ul { /* toutes les listes */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}
#nav a {
  display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	text-decoration: none;
	/*display: block;
	width: 10em;*/
}
#nav li { /* tous les items de liste */
	float: left;
	width: 100px; /* largeur obligatoire, sinon opera devient fou */
}
#nav li ul { /* listes de deuxième niveau */
	position: absolute;
	background: black;
	width: 100px;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}
#nav li:hover ul, #nav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}
/*RINGS*/
#rings a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_rings.gif") no-repeat 0 0;
	text-decoration: none;
}
#rings a:hover{
	background: url("images/menu/Menu_rings.gif") no-repeat 0 -28px;
}
#rings a span{
	display:none;
}
/*NECKLACES*/
#necklaces a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_necklaces.gif") no-repeat 0 0;
	text-decoration: none;
}
#necklaces a:hover{
	background: url("images/menu/Menu_necklaces.gif") no-repeat 0 -28px;
}
#necklaces a span{
	display:none;
}
/*EARRINGS*/
#earrings a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_earrings.gif") no-repeat 0 0;
	text-decoration: none;
}
#earrings a:hover{
	background: url("images/menu/Menu_earrings.gif") no-repeat 0 -28px;
}
#earrings a span{
	display:none;
}
/*BRACELETS*/
#bracelets a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_bracelets.gif") no-repeat 0 0;
	text-decoration: none;
}
#bracelets a:hover{
	background: url("images/menu/Menu_bracelets.gif") no-repeat 0 -28px;
}
#bracelets a span{
	display:none;
}

the test page is here if you want to throw an eye :
test page

My question : is it possible to make both working together ?

[jscheuer1]

I see no potential conflict between the two. I also see no attempt on your page to use the menu. Not that there is no attempt, just that if there is, it uses different HTML code than in your post.

Make things easy on those who would try helping you. Make sure your demo has at least your best attempt at using both the menu and the script. And let us know where the menu is. The script was easy to spot.

[buzuc]

Oups,

sorry about that but I made changes after posting.
Here is the good link :
test site

the problem is that the menu part called "collection" is a dropdown one.
1) It's impossible to select one of the second level item ("Necklaces,Rings...): the menu is closed when you move the mouse over one of these levels.
2) The dropdown list is under the slideshow.

thanks for your help and your speedy answer !

[jscheuer1]

OK, that's better. You are aware that since this menu is a css pseudo hover class based one and that it doesn't exclusively apply the hover class to links, it will not function in IE. That aside, to get it to work in browsers that support hover on other elements, you need to set the style of the elements involved to overcome the slideshow's prominence in the stacking order, this can be done like so (I'm showing some of your code so you can see where this can go, additions red):

</script>
<style type="text/css">
#Collection {
z-index:100;
position:relative;
}
</style>
</head>

<body>

This information can also be added on the external style sheet.

[buzuc]

It works !
thanks again.

One more thing, I know that this is not a CSS forum but how can I make my menu work with that f.....g IE ?

I know that only "a:hover" is working on IE !

[buzuc]

Got it !
Just add this script in the <Head> :

<script type="text/javascript">
<!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//-->
</script>