Took a different approach and decided to create the slide down div backgrounds dynamically through JS - creating each dom node and then assigning it to the dom, limiting the total number produced.
Overlaying each div with the next. WORKING JSFIDDLE
var parentList = $('.parent');
// declare variables
var currentChildTitle;
var currentTitle;
var banner;
// setup append div function
function dropBanner(currentTitle) {
// create the banner variable dom node
banner = $('<div class="' + currentTitle + '"/></div>');
// add it to the dom
$('.boxes').append(banner);
// animate it
$('.' + currentTitle).slideDown(300);
}
// setup a function to limit the number of divs appended
function chop() {
if ($('.boxes div').length > 15) {
$('.boxes div').eq(0).remove();
}
}
// listen for mouseover the parent list items
parentList.on('mouseover', function (e) {
if (!($(this).find('.locations-wrapper').is(':visible'))) {
$(this).find('.locations-wrapper').slideDown(300);
}
// grab the current list item title
currentTitle = $(this).find('a').attr('title');
// call dropBanner passing the current list item title
dropBanner(currentTitle);
chop();
});
// listen for mouseleave
parentList.on('mouseleave', function () {
$(this).find('.locations-wrapper').delay(300).slideUp(300);
$('.boxes div').delay(300).slideUp(300);
});
// listen for mouseover the submenu list items
$('.sub-menu').on('mouseover', 'li', function (e) {
// grab the current list item title
currentTitle = $(this).find('a').attr('title');
// call dropBanner passing the current list item title
dropBanner(currentTitle);
chop();
// stop the bubbling up effect to parent list items
e.stopPropagation();
});