The code below is my first crack at a jQuery script for animating a three-level 'Suckerfish' menu which has run in CSS only form for some time. It can be seen working at http://www.holidaymullandiona.com

This is the entire script:

Code:
	$(document).ready(function(){
//		alert ('Welcome to Holiday Mull');

		$('#nav li ul').css({
			display: 'none',
			left: 'auto'
		});
//              Selector for first level <li>
		$('ul.level1 li').hover(function() {
			$(this)
				.children('ul')       // Should select ONLY next (second) level UL
				.stop(true, true)
				.delay(500)
				.slideDown('slow');
		}, function() {
			$(this)
				.children('ul')       // Should select ONLY next (second) level UL, but appears to select third level as well
				.stop(true, true)
				.delay(500)
				.fadeOut('fast');  // This action gets applied to all levels when <li> is un-hovered, but this is NOT what I want
		});

//              Selector for second level <li>
		$('#nav li li').hover(function() {
			$(this)
				.children('ul')       // Should select ONLY next (third) level UL
				.css({'opacity': '0', zIndex: '-1'})
				.animate({
					left: '104px',
					opacity: '1',
					zIndex: '1'
				}, 500);
		}, function() {                     // This should be the 'un-hover' action, but the 'fadeOut' above happens first
			$(this)
				.children('ul')
//				.delay(500)
				.animate({
					left: '200px',
					opacity: '0.25',
//					zIndex: '-1'
				}, 500);
		});
	});
Hovering over the first level <li> gets the drop-down menu as required, then hovering on a second-level <li> gets the third level (where present). The third level <ul> appears from behind the second, in accordance with the animation:
Code:
		$('#nav li li').hover(function() {
			$(this)
				.children('ul')
				.css({'opacity': '0', zIndex: '-1'})  // sets a start condition ensuring the third level underlies second
				.animate({
					left: '104px',
					opacity: '1',
					zIndex: '1'
				}, 500);
                                 ...
Up to this point it works as I intend. The problem is that when I move the mouse, either to another <li> or off the menu altogether the third level <ul> does the "fadeOut('fast')" of the second level instead of the intended animation. For illustration purposes only, the intended animation shown would move the <ul> further out to the right and fade it. It is clear that this action does occur (but only after the "fadeOut('fast')"), because when the <li> is next hovered, the <ul> does indeed appear from the right.

Code:
// Intended action on UN-hovering (moves <ul> to the right and fades it out)
                ...
		}, function() {
			$(this)
				.children('ul')
//				.delay(500)
				.animate({
					left: '200px',
					opacity: '0.25',
//					zIndex: '-1'
				}, 500);
		});
// For illustration only: ultimately this will be changed to move <ul> back to the left
This can be most easily seen on the linked web page by first hovering on 'Places to Stay' and then alternately hovering 'B&B/Guest Hoses' and 'Self-catering'. http://www.holidaymullandiona.com


What I'd like is for the third level <ul> to follow the intended animation when it's parent <li> is no longer hovered, and NOT fade out as it does now. I think this means making the first level selector more specific so that it doesn't also select the second level. I thought I'd done that with the ".children('ul')", but it seems not. I have tried adding a class to the <ul>, as in ".children('ul.level2')" or ".find('ul.level2')" but so far without success. It doesn't produce a syntax error, just no level 3 action, so presumably it's now TOO specific !

Can anyone point me in the right direction, please ?