Появление div не могу разобраться

[yura_yushkevich]

Здравствуйте!
Делаю выпадающее меню, вроде как и ничего сложного, проблема в следующем, ставлю обработку onmouseover на li, при наведении появляется (div id="block_1") но как только я увожу курсор с li div, сразу закрывается т.к. срабатывает событие onmouseout, в div я тоже прописал onmouseover и onmouseout, однако div все равно сразу закрывается.
Помогите плз. В js только начинаю. Заранее спсибо.

function display_visible (block_1)

{
		if ($(block_1).css('display') == 'none')
		{
		$(block_1).animate({height: 'show'}, 500);
}


}

function display_hide (block_1)
{
	if ($(block_1).css('display') == 'block')
{
	$(block_1).animate({height: 'hide'}, 500);
}
}

<ul>
                        <li onmouseover="display_visible('#block_1')" onmouseout="display_hide('#block_1')"><a href="#" class="active">Новые автомобили</a>

                            <div class="main_menu_right_sub_wrp" id="block_1" onmouseover="display_visible('#block_1')" onmouseout="display_hide('#block_1')">
                                <ul class="main_menu_right_sub_left">
                                    <li class="fl-l">
                                        <ul>
                                            <li class="main_menu_right_sub_text_label"> Обзор</li>
                                            <li> <a title="" href="#"> Спецпредложения </a> </li>
                                            <li>
                                                <a title="" href="#"> Конфигуратор </a>
                                            </li>
                                            <li>
                                                <a title="" href="#"> Цены </a>
                                            </li>
                                            <li>
                                                <a title="" href="#"> Модельный ряд </a>
                                            </li>
                                            <li>
                                                <a title="" href="#"> Модельный ряд AMG </a>
                                            </li>
                                            <li>
                                                <a title="" href="#"> designo </a>
                                            </li>
                                            <li>
                                                <a title="" href="#"> guard </a>
                                            </li>
                                            <li>
                                                <a title="" href="#"> AMG </a>
                                            </li>
                                            <li>
                                                <a title="" href="#"> smart </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul class="main_menu_right_sub_right">
                                            <li class="main_menu_right_sub_text_label"> Быстрый доступ </li>
                                            <li><a target="_blank" title="" href="http://sales.mercedes-olimp.ru/ "> Сегодня в продаже</a>
                                            </li>
                                            <li><a target="_blank" title="" href="http://www.test-drive.mercedes-olimp.ru "> Заявка на тест-драйв</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <ul class="main_menu_right_sub_sec">
                                    <li class="main_menu_right_sub_text_label"> Спецпредложения </li>
                                    <li>
                                        <div class="main_menu_right_sub_img_wrp">
                                                <section>
                                                    <div class="main_menu_right_sub_img_wrp_inner">
                                                        <a class="main_menu_right_sub_img_wrp_block special" target="_blank" href="#" title="Спецпредложения">
                                                            <h2>Спецпредложения</h2>
                                                            <p>в наличии<br></p>
                                                        </a>
                                                    </div>
                                                </section>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="">
                                            <section>
                                                <a class="main_menu_right_sub_img_wrp_block complex" href="#" title="Противоугонный комплекс">
                                                    <h2>Противоугонный<br>комплекс</h2>
                                                    <p>в подарок!<br></p>
                                                </a>
                                            </section>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>

[danik.js]

Сделай по-нормальному. Навешивай обработчики через jQuery. Ну и наверно не mouseover, а mouseenter (еще один повод навешивать их через jQuery, ибо они не поддерживаются старыми браузерами, а jQuery это фиксит).

[yura_yushkevich]

Навешивай обработчики через jQuery

Это как? Я извиняюсь )

[danik.js]

$('li').mouseenter(function(){ ... }).mouseleave(...)

Или шорткат:

$('li').hover(function() { /* mouseenter */ }, function() { /* mouseleave */ });

[yura_yushkevich]

спс. сейчас попробую разобраться )

[yura_yushkevich]

О!!! Получилось

вот так сделал

$(document).ready(function(){

	$("#link_1").mouseenter(function(){
		$(block_1).animate({height: 'show'}, 500);
	});
	$("#block_1").mouseleave(function(){
		$(block_1).animate({height: 'hide'}, 500);
	});

});

[danik.js]

Лучше так:

$(document).ready(function(){
 
    $("#link_1").mouseenter(function(){
        $("#block_1").animate({height: 'show'}, 500);
    });
    $("#block_1").mouseleave(function(){
        $(this).animate({height: 'hide'}, 500);
    });
 
});