我被这个问题困住了，想不出除此之外的方法。看看图片
http://i.stack.imgur.com/7xxjS.png
现在的问题是，div 不是 li 的一部分，并且在离开 li（并进入 div）时，li 会倒塌。这需要处理，我被困在如何做到这一点上。
下面是javascript代码
a.cache.brand_nav.find("li a").hover(function (c) {
if (a.isTablet && c.currentTarget.href !== f) d.location = c.currentTarget.href;
else {
a.cache.brand_nav.find("li a").css('top', '0px'); //Collapsing all li's before expanding one
c = b(this);
c.stop(true, true).animate({ top: '-' + c.find("img").height() + 'px' }, 250, 'easeInCirc');
$('#bgIdeas').stop(true, true).animate({ bottom: '+' + parseInt(parseInt(c.find("img").height())).toString() + 'px' }, 500, 'easeInCirc', false);
$('.outerBGs').hide();
$('#backgrounds').hide();
if (this.className == 'ideas') {
$('#ideasBG').stop(true, true).show(5000, 'easeOutExpo');
$('#bgIdeas').empty();
$('#bgIdeas').append('<p style=" position:absolute; left:22%; margin-top:10px;"><img src="images/ideas/ideas_worldofideas_thumb.jpg"><br>World of Ideas</p> <p style=" position:absolute; left:32%; margin-top:10px;"><img src="images/ideas/ideas_history_thumb.jpg"><br>History</p> <p style=" position:absolute; left:42%; margin-top:10px;"><img src="images/ideas/ideas_gulahmed_thumb.jpg"><br>About Gul Ahmed</p> <p style=" position:absolute; left:52%; margin-top:10px;"><img src="images/ideas/ideas_partner_thumb.jpg"><br>Be an Ideas Partner</p>');
}
else
if (this.className == 'women') {
$('#womenBG').stop(true, true).show(5000, 'easeOutExpo');
$('#bgIdeas').empty();
$('#bgIdeas').append('<p style=" position:absolute; left:42%; margin-top:10px;"><img src="images/women/women_fabrics_thumb.jpg"><br>Fabric</p> <p style=" position:absolute; left:52%; margin-top:10px;"><img src="images/women/women_readytowear_thumb.jpg"><br>Ready to Wear</p> <p style=" position:absolute; left:62%; margin-top:10px;"><img src="images/women/women_shoes_thumb.jpg"><br>Shoes</p> <p style=" position:absolute; left:72%; margin-top:10px;"><img src="images/women/women_bags_thumb.jpg"><br>Bags</p>');
}
else
if (this.className == 'men') {
$('#menBG').stop(true, true).show(5000, 'easeOutExpo');
$('#bgIdeas').empty();
$('#bgIdeas').append('<p style=" position:absolute; left:20%; margin-top:10px;"><img src="images/men/men_fabrics_thumb.jpg"><br>Fabric</p> <p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/men/men_readytowear_thumb.jpg"><br>Ready to Wear</p> <p style=" position:absolute; left:61%; margin-top:10px;"><img src="images/men/men_shoes_thumb.jpg"><br>Shoes</p> <p style=" position:absolute; left:71%; margin-top:10px;"><img src="images/men/men_accesories_thumb.jpg"><br>Accessories</p>');
}
else
if (this.className == 'kids') {
$('#kidsBG').stop(true, true).show(5000, 'easeOutExpo');
$('#bgIdeas').empty();
$('#bgIdeas').append('<p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/kids/kids_readytowear_thumb.jpg"><br>Ready to Wear</p> <p style=" position:absolute; left:40%; margin-top:10px;"><img src="images/kids/kids_shoes_thumb.jpg"><br>Shoes</p> <p style=" position:absolute; left:50%; margin-top:10px;"><img src="images/kids/kids_accessories_thumb.jpg"><br>Accessories</p>');
}
else
if (this.className == 'homes') {
$('#homesBG').stop(true, true).show(5000, 'easeOutExpo');
$('#bgIdeas').empty();
$('#bgIdeas').append('<p style=" position:absolute; left:30%; margin-top:10px;"><img src="images/home/bed_linen_thumb.jpg"><br>Bed Linen</p> <p style=" position:absolute; left:40%; margin-top:10px;"><img src="images/home/bed_basics_thumb.jpg"><br>Bed Basics</p> <p style=" position:absolute; left:50%; margin-top:10px;"><img src="images/home/kitchen_textile_thumb.jpg"><br>Kitchen Textile</p> <p style=" position:absolute; left:60%; margin-top:10px;"><img src="images/home/bath_thumb.jpg"><br>Bath Accessories</p> <p style=" position:absolute; left:70%; margin-top:10px;"><img src="images/home/home_accessories_thumb.jpg"><br>Home Accessories</p>');
}
}
},
function () {
c = b(this);
$('.outerBGs').stop(true, true).hide(5000, 'easeOutExpo');
$('#backgrounds').stop(true, true).show(1000, 'easeOutExpo');
$('#bgIdeas').stop(true, true).animate({ bottom: '0px' }, 250, 'easeInCirc');
c.stop(true, true).animate({ top: '0px' }, 250, 'easeInCirc');
// $(document).unbind('mousemove');
// $(document).mousemove(function (e) {
// var offset = $('#bgIdeas').offset();
// result = offset.left <= e.pageX && offset.left + $('#bgIdeas').outerWidth() > e.pageX && offset.top <= e.pageY && offset.top + $('#bgIdeas').outerHeight() > e.pageY;
// //To see if mouse coordinates are under the area of div.
// //alert(parseInt(parseInt(offset.left) + parseInt($('#bgIdeas').outerWidth())) + ' ' + e.pageX + ' ' + parseInt(parseInt(offset.top) + parseInt($('#bgIdeas').outerHeight())) + ' ' + e.pageY);
//
// if (result == false) {
// clearInterval(myRecFunc);
// $('.bgs').show();
// continueSlideShow();
//// $('#bgIdeas').stop(true, true).animate({bottom: "0px"},500, "easeOutExpo", function () {$(document).unbind('mousemove');});
//// c.stop(true, true).animate({top: "0px"},{ duration: 500, queue: false });
//
// }
// else {
// }
// });
});
上面注释的代码，实际上是我之前通过 mousemove 事件尝试的一种方法，通过捕获鼠标位置并限制函数在鼠标在 DIV 上时进入代码，但它会导致随机运行不正常，我想这一定是因为绑定和解绑事件的速度如此之快。拜托，我需要这方面的帮助。