<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 을 클릭했을때 제대로 넘어가게 할수있는 방법이 있을까요?