Javascript-форум - Аккордеон при ховере

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Аккордеон при ховере (https://javascript.ru/forum/misc/46677-akkordeon-pri-khovere.html)

Аккордеон при ховере

Здравствуйте! Практикую 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>

hhh,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function ()
{
    $('.menu > li > ul').hide();
    $('li').on('mouseenter',function(){$('>ul:hidden',this).slideDown() })
    $('li').on('mouseleave',function(){$('>ul:visible',this).slideUp() })

})
  </script>
</head>

<body>
<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>
</body>
</html>

Спасибо. Кода совсем мало. Это уже больше похоже на раздвижное меню. Только мне надо чтобы работало по логике аккардеона.
Вот так http://novice2ninja.ru/jq-src/chapte...ple_accordion/
только с ховером.

Пришлось установить модуль и гадить все !important...

Спасибо Рони, я сегодня уже попал на эту страницу только не обратил внимание на менюшку справа.