[hhh]

Здравствуйте! Практикую jquery, пока сложновато. Есть такой код аккардеона с гугла. Он работает так как надо, только при клике. А я хочу сделать при ховере, но когда изменяю .click на .hover начинает танцевать меню. Собственно нужна помощь, лучше с маленьким пояснением, если можно.

<ul class="menu" style="width: 125px">
      <li><a href="#">Ссылка1</a></li>
      <li><a href="#">Ссылка2</a>
        <ul>
          <li><a href="#">Подменю1</a></li>
          <li><a href="#">Подменю2</a></li>
          <li><a href="#">Подменю3</a></li>
        </ul>
      </li>
      <li><a href="#">Ссылка3</a></li>
      <li><a href="#">Ссылка4</a>
        <ul>
          <li><a href="#">Подменю4</a></li>
          <li><a href="#">Подменю5</a></li>
          <li><a href="#">Подменю6</a></li>
        </ul>      </li>
      <li><a href="#">Ссылка5</a></li>
    </ul>

<script>
    $('document').ready(function(){
      $('.menu > li > ul').click(function(event){
        event.stopPropagation();
      })
      // .filter(':not(:first)')
      .hide();

      $('.menu > li').click(function(){
        var selfClick = $(this).find('ul:first').is(':visible');
        if(!selfClick) {
          $(this)
            .parent()
            .find('> li ul:visible')
            .slideToggle();
          }
          $(this)
            .find('ul:first')
            .stop(true, true)
            .slideToggle();
      });
    });
  </script>