<ul class='depth1'>
<li class='menu1' href='대분류1경로'>대분류1
<ul class='depth2'>
<li class='menu2' href='중분류1-1경로'>중분류1-1<li>
<li class='menu2' href='중분류1-2경로'>중분류1-2<li>
<li class='menu2' href='중분류1-3경로'>중분류1-3<li>
</ul>
<li>
<li class='menu1' href='대분류2경로'>대분류2
<ul class='depth2'>
<li class='menu2' href='중분류2-1경로'>중분류2-1<li>
<li class='menu2' href='중분류2-2경로'>중분류2-2<li>
<li class='menu2' href='중분류2-3경로'>중분류2-3<li>
</ul>
<li>
</ul>

<script>
jQuery().ready(function(){
$('.depth1 li').click(function(){ location.href= $(this).attr('href'); });
$('.depth2 li').click(function(){ location.href= $(this).attr('href'); });
});
</script>


이러한 상황일때..
중분류 1-1 을 클릭하면 대분류1의 경로로 이동을 합니다.
depth2 를 클릭해도 depth1 에 포함이 되서
$('.depth2 li').click 이것만 실행이 되어야 하는데

$('.depth1 li').click , $('.depth2 li').click
이 두개가 모두 실행됩니다.


중분류 1-1 을 클릭했을때 제대로 넘어가게 할수있는 방법이 있을까요?