Not Slide Down

[Deadweight]

Currently I am trying to make a unique slider that will slide down a div item with the id bce_slider once you mouse over an li. Also, if you move your mouse over to bce_slider it will not disappear. However if you mouseleave/mouseout the #nav>li or #bce_slider then #bce_slider should slide away.
Here is my the issue with the code:


$(document.body).on('mouseout',':not('+a.id+' *, #bce_slider)',function(e){
$('#'+a.sliderId).html('')
$('#'+a.sliderId).stop().animate({
height:'0px'
},300)

})


Here is the URL:
http://thebcelements.com/dhtml/slider/slide.htm

Anyways, thanks in advance!

[Deadweight]

I actually fixed this on my own
My solution:


$(function(){
menuSlider({
id: '#nav',
slideLocation: '#mainBody',
sliderId: 'bce_slider'
})

})
var h
function menuSlider(a){
var ihtml = $(a.slideLocation).html()
$(a.slideLocation).html('<div id="'+a.sliderId+'"></div><div class="newBody">'+ihtml+'</div>')
var loc = -1
var i = -1;

$('#nav *, #bce_slider, #bce_slider *').mouseenter(function(){
if($(this).parent().attr('id')=='nav'){
i = $(this).index()
}

var h = $(a.id+'Zone>li').eq(i).html()
var hh = getHeight(h)
var hhh = $('#'+a.sliderId).height()
$('#'+a.sliderId).html(h)
$('#'+a.sliderId).stop().animate({
height:hh+'px'
},300)
dev(h)
}).mouseleave(function() {
$('#'+a.sliderId).html('')
$('#'+a.sliderId).stop().animate({
height:'0px'
},300)
})
}