Выделение активных пунктов многоуровневого меню на jQuery

Приветствую Вас, уважаемое сообщество. Интересует вопрос:
Есть меню следующего вида:

<ul>
    <li><a href="/1"><span>Пункт меню 1</span></a>
        <ul>
          <li><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
          <li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
          <li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
        </ul>
    </li>
    <li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>

При переходе в Пункт меню 1, то ему автоматически присваивается класс .active и вложенные пункты при наличии этого класса раскрываю, если же мы идем дальше и заходим в Пункт меню 1.1, то класс с Пункт меню 1 сбрасывается и раскрывающийся список сворачивается чего быть не должно.
По сути при присутствии на странице Пункт меню 1.1, то исходный код должен выглядеть вот так:

<ul>
    <li class="active"><a href="/1"><span>Пункт меню 1</span></a>
        <ul>
          <li class="active"><a href="/1-1"><span>Пункт меню 1.1</span></a></li>
          <li><a href="/1-2"><span>Пункт меню 1.2</span></a></li>
          <li><a href="/1-3"><span>Пункт меню 1.3</span></a></li>
        </ul>
    </li>
    <li><a href="/2"><span>Пункт меню 2</span></a></li>
</ul>

Вот сам код jQuery:

<script type="text/javascript">
  $(document).ready(function(){
    var link = window.location.pathname;
    $('.nav li a[href="'+link+'"]').parent().addClass('active');
  });
</script>

Прошу помощи у Вас :)
думаю не одного меня этот вопрос интересует.