Hi all,

I know I should not be bothered to much with IE8 but I still find people who work with this browser.
My issue is that IE8 does not seem to show the third level of my submenu.

I did alter the submenu and maybe it is due to an bug in IE8 (which I installed in Virtualbox). Anyway, I would appriciate it if someone would take a look at it.

You can find an exampe on my website.

This is the JQuery:

Code:
/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//** Jul 23rd, '12: Unofficial update adds hover images for down and right arrows in the format: filename_over.ext
//** These must be present for whichever or both of the arrow(s) are used and will preload.
//** See: http://www.dynamicdrive.com/forums/showthread.php?p=278181#post278181

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):

var arrowimages={down:['downarrowclass', 'http://www.apologeet.nl/images/template/down.gif', 23], right:['rightarrowclass', 'http://www.apologeet.nl/images/template/right.gif'], re: /\.(?=(gif)|(jpg)|(png))/i}

var subslidemenu={

animateduration: {over: 400, out: 300}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
	arrowsvar.down[3] = arrowsvar.down[1].replace(arrowimages.re, '_over.');
	arrowsvar.right[3] = arrowsvar.right[1].replace(arrowimages.re, '_over.');
	jQuery(new Image()).attr('src', arrowsvar.right[3]);
	jQuery(new Image()).attr('src', arrowsvar.down[3]);
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					var overarrow=arrowsvar[this.istopheader? 'down' : 'right'][3];
					$curobj.find('img:eq(0)').attr('src', overarrow)
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(subslidemenu.animateduration.over)
				},
				function(e){
					var arrow=arrowsvar[this.istopheader? 'down' : 'right'][1];
					$curobj.find('img:eq(0)').attr('src', arrow)
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(subslidemenu.animateduration.out)
				}
			) //end hover
			$curobj.click(function(){
				$(this).children("ul:eq(0)").hide()
			})
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}

//build menu with ID="slidemenu" on page:

subslidemenu.buildmenu("slidemenu", arrowimages)
This is the CSS:

Code:
.subslidemenu {
	font: normal 11px/12px Arial, Helvetica, sans-serif;
	padding: 4px 0 0 0;
	height: 17px;
	float: left;
}
.subslidemenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-image: url("http://www.apologeet.nl/images/template/sub-bg.gif");
	background-repeat: repeat;
}
/*Top level list items*/
.subslidemenu ul li {
	position: relative;
	display: inline;
	float: left;
	background: url("http://www.apologeet.nl/images/template/navigation-dropdown-divider.gif") 0 0 no-repeat;
}
/*Top level menu link items style*/
.subslidemenu ul li a {
	display: block;
	padding: 8px 10px;
	text-decoration: none;
}
.subslidemenu ul li a:link,.subslidemenu ul li a:visited {
	outline: none;
	text-decoration: none;
	color: #84915D;
}
.subslidemenu ul li a:hover {
	color: white;
}
/*1st sub level menu*/
.subslidemenu ul li ul {
	position: absolute;
	left: 0;
	display: block;
	visibility: hidden;
	-moz-box-shadow: 8px 10px 25px #000; /* Firefox/Mozilla */  
 	-webkit-box-shadow: 8px 10px 25px #000; /*Safari/Chrome */  
 	box-shadow: 8px 10px 25px #000; /* Opera & how it should be */
 	z-index: 999;  
}
/*Sub level menu list items (undo style from Top level List Items)*/
.subslidemenu ul li ul li {
	display: list-item;
	float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.subslidemenu ul li ul li ul {
	top: 0;
}
/*Sub level menulinks style*/
.subslidemenu ul li ul li a {
	font: normal 11px/12px Arial, Helvetica, sans-serif;
	width: 160px; /*width of sub menus*/
	padding: 5px 5px 5px 10px;
	margin: 0;
	border-top-width: 0;
	border-bottom: 1px solid gray;
}
.subslidemenu ul li ul li a:hover {
	/*sub menus hover style*/
	background: rgba(0, 0, 0, 0.6);
	/*color: black;*/
}
/*CSS classes applied to down and right arrow images*/
.downarrowclass {
	position: absolute;
	top: 12px;
	right: 5px;
}
.rightarrowclass {
	position: absolute;
	top: 6px;
	right: 5px;
}

* html .subslidemenu ul li a {
	/*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ie7-8 .subslidemenu ul li ul {
filter:
  	progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8),
  	progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6),
  	progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=10),
  	progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=225,strength=1),
  	progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=270,strength=3),
}
Probably it is just a small thing but I cannot find it.

Kind regards,
Jurgen