Having - finally! - finished this, I thought I'd post my code. I'm
very sure it could be more compact, but I'm a bit of a Javascript dork
and thought others might benefit from my step-by-step approach ;)
// menu show/hide
$( '#themenu' ).children( 'li[id]' ).hover( function() {
var theID = $( this ).attr( 'id' );
var theSiblings = $( this ).siblings() ;
// second level
var theList = "#" + theID + " ul:first" ;
$( theList ).slideToggle( 'slow' );
$( theSiblings ).children( 'ul' ).hide() ;
// third level
var theSub = $( theList ).children( 'li' ) ;
$( theSub ).hover( function() {
var theSubSibs = $( this ).siblings() ;
$( this ).children( 'ul' ).fadeIn( 'slow' ) ;
$( theSubSibs ).children( 'ul' ).fadeOut( 'fast' ) ;
});
},
function() {
$( this ).children( 'ul' ).hide( 'slow' ) ;
});
Cherry.
