Наложение блоков position:absolute и mouseleave

[tavot]

Добрый вечер.

Пациент:  _http: //win.kronwerk.net/autoproducts/parts/tecdoc/ford/?qs=transit

 

Проблема: Исчезает всплывающее меню модели, когда из-за своей величины(множества строк) накладывается на футер и курсор попадает в эту область пересечения ( явный пример Форд Транзит). Соответственно и текст в футере виден в этом меню.

 

На сколько смог разобраться сам, понял что футер и всплывающее меню модификаций позиционированы absolute.

absolute - ... при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет©

 

Следовательно когда меню и футер пересекаются, js  

$('.ddpick').bind('mousedown', openSubMenu);$('.ddpick').bind('mouseleave', closeSubMenu);function openSubMenu() {	$(this).find('ul').css('display', 'block');	};function closeSubMenu() {	$(this).find('ul').css('display', 'none');	};

"думает" что курсор покинул зону меню и меню закрывается. 

 

Что посоветуете?

Сам думал о таких вариантах:

1) Как сделать так, что бы футер уходил ниже всплывающего меню? ( вариант предпочтительнее, но если будет в середине страницы ведь будут сдвигаться и другие блоки с моделями?)

2) Как сделать так, что бы всплывающее меню было "главнее" футера, то есть накладывалось сверху  и не вызывалось событие mouseleave

3) Переделывать футер - учитывая "избитость" темы, не хочется связываться.

 

 

 

Добавлено:
2)Решение для второго пункта: Нашел вариант с использованием: z-index:1 ... z-index:2

Возможно ли сделать так:

При открытии меню с моделями, не допускать его наложения на футер?

Edited December 24, 2013 by tavot