Merhaba arkadaşlar burda açılır var ama alt kategorinin altının direk açılmasını istiyorum buyrun kodlar burda.

Yardımlarınızı bekliyorum.

<div style="width: 213px;margin-bottom:5px;border-left:#dce8ee 1px solid;border-right:#dce8ee 1px solid;"><div class="AnaKategori" style="padding-top:5px;font-weight:bold;font-size:15px;cursor:pointer;width:198px;display:block; border-left:1px solid #dce8ee; border-right:1px solid #dce8ee; padding-left:15px;"><a style="color:#555;display: block;" href="javascript:void(0);" onclick="$(this).parent().parent().next().css('display') != 'none' ? $(this).parent().parent().next().hide() : $('.SubMenu').hide() && $(this).parent().parent().next().show();">{%BASLIK%}</a></div></div>
<div class="SubMenu" style="display: none;">{%ICERIK%}</div>

<style>
	.AnaKategori{
		font-weight:bold;
		border:#99CCFF 1px solid;
		background-color: #FFFF99;
		margin-left: 10px;
		margin-bottom: 0px;
		display: list-item;
		padding: 2px;
	}
	.AnaKategori a:HOVER{
		text-decoration: none;
	}
	
	.SubMenu .SubMenuItem{
		display: block;
		font-weight:bold;
		border:#99CCFF 1px solid;
		background-color: #FF9999;
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 2px;
		font-weight:bold;
		font-size:12px;
		cursor:pointer;
		color: #555555;
		padding: 10px;
	}
	
	.SubMenu table{
		width: 100%;
	}

	.SubMenu  a{
		padding: 2px;
		display: block;
		color: #555555
	}
	.SubMenu a:HOVER{
		text-decoration: none;
	}
}
</style>
<script>
$(".AnaKategori").mouseover(function(){
	$(this).css("background-color", "#FF9999");
}).mouseleave(function(){
	$(this).css("background-color", "#FFFF99");
});
$(".SubMenuItem a").mouseover(function(){
	$(this).css("background-color", "#FFFF99");
}).mouseleave(function(){
	$(this).css("background-color", "#FF9999");
});
</script>