Раскрыть правую часть меню в соответствии с ID
 

Приветствую!

Есть меню, в котором есть видимая левая часть и правая часть, которая раскрывается в соответствии с выбранной вкладкой в левой части меню.

Помогите переделать JS, чтобы задача была выполнена.

<div class="all_categorys">
<!-- Левая видимая часть меню начало-->	
	<div class="mc">
		<ul class="menu">
			<li cat_id="1">
				<div class="class">
					<h4><a href="index.html?cate_id=1">Title 1</a></h4>
				</div>
			</li>
			<li cat_id="2">
				<div class="class">
					<h4><a href="index.html?cate_id=2">Title 2</a></h4>
				</div>
			</li>
			<li cat_id="3">
				<div class="class">
					<h4><a href="index.html?cate_id=3">Title 3</a></h4>
				</div>
			</li>
		</ul>
     <!-- скролл начало-->	
             <div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px; height: 573px; display: inherit;"><div class="ps-scrollbar-y" style="top: 0px; height: 518px;"></div></div>
    <!-- скролл конец-->	
	</div>
<!-- Левая видимая часть меню конец-->	

<!-- Правая раскрывающаяся часть меню начало-->		
	<div class="sub-class" cat_menu_id="1" style="display: none; top: -2px;">												
		<div class="sub-class-content">							
			<div>Text</div>														
		</div>
	</div>
	<div class="sub-class" cat_menu_id="2" style="display: none; top: -38px;">												
		<div class="sub-class-content">							
			<div>Text</div>														
		</div>
	</div>
	<div class="sub-class" cat_menu_id="3" style="display: none; top: -74px;">												
		<div class="sub-class-content">							
			<div>Text</div>														
		</div>
	</div>
<!-- Правая раскрывающаяся часть меню конец-->			
	
	
</div>

$(function() {
	$(".all_categorys ul.menu").find("li").each(
		function() {
			$(this).hover(
				function() {
				    var cat_id = $(this).attr("cat_id");
					var menu = $(this).find("div[cat_menu_id='"+cat_id+"']");
					menu.show();
					$(this).addClass("hover");					
					var menu_height = menu.height();
					if (menu_height < 60) menu.height(80);
					menu_height = menu.height();
					var li_top = $(this).position().top;
					$(menu).css("top",-li_top + 40);
				},
				function() {
					$(this).removeClass("hover");
				    var cat_id = $(this).attr("cat_id");
					$(this).find("div[cat_menu_id='"+cat_id+"']").hide();
				}
			);
		}
	);  

});

Заранее спасибо!

Vaska,
строки 7 и 19 убрать (this).find

рони,
Спасибо, праваяя часть меню теперь открывается в соответствии с выбранной вкладкой меню слева.
Есть новая проблема: между левой частью меню и открывшейся правой частью меню есть вертикальный скролл. Если указатель мышки навести на раскрывшуюся правую часть меню, то правое меню закрывается. Это из за скролла между левой и правой частью меню. Когда мышка перешагивает через скролл, правая часть меню закрывается.
В первом сообщении я исправил код HTML и добавил скролл в строку 22.
Как решается такая задача?

Vaska,
такие задачи обычно решаются с помощью css, а не скриптов.
в вашем случае можно попробовать так ...

$(function() {
    $(".all_categorys ul.menu").find("li").each(
        function() {
            $(this).hover(
                function() {
                    var cat_id = $(this).attr("cat_id");
                    var menu = $("div[cat_menu_id='" + cat_id + "']");
                    $(".sub-class").not(menu).stop().hide();
                    menu.stop().show();
                    $(this).addClass("hover");
                    var menu_height = menu.height();
                    if (menu_height < 60) menu.height(80);
                    menu_height = menu.height();
                    var li_top = $(this).position().top;
                    $(menu).css("top", -li_top + 40);
                },
                function() {
                    $(this).removeClass("hover");
                    var cat_id = $(this).attr("cat_id");
                    $("div[cat_menu_id='" + cat_id + "']").stop().delay(700).hide(200);
                }
            );
        }
    );
    $(".sub-class").hover(function() {
        $(this).stop(true).show();
    }, function() {
        $(this).stop().hide();
    })
});

и делайте полноценный макет, минимальный, но достаточный со всеми css и т.д. а не куски кода, по которым нужно гадать что и как у вас устроено.

рони,
в первый пост добавил стили .css.
После изменений JS меню ведет себя нестабильно.
При наведении мышки на первые несколько вкладок меню слева, по очереди, первые несколько вкладок открывает правое меню правильно, а на 5-6 вкладке перестает открывать правое меню или открывает половину меню. Как-то странно.
Если мышкой переходить по вкладкам и потом возвращаться на предыдущую вкладку, то открывает правую часть хорошо.
При наведении на вертикальный скролл, правая часть меню всё-равно закрывается, а нужно, чтобы не закрывалась.

Vaska,
я пас.

рони,
тогда последний вопрос: можете исправить код JS, чтобы при наведении мышки на вкладку левой части меню, открывалась правая часть меню, но не закрывалась, если мышку убрать из области правой части меню. А закрывать правую часть меню кликнув мышкой за пределами меню.