jquery hover on mouseover my subcategories disappear

Question

MY jQuery CODE:

$(function()
{
    $(".third-categories").hide();  
});

$(function()
{
    $(".second-categories").hover(function() {
    $(this).next(".third-categories").show("slow");},
    function(){
    $(this).next(".third-categories").hide("slow");}
    );

});
$(function()
{
    $(".third-categories").mouseover(function(){(".third-categories").show("slow");});  
});

MY HTML CODE: I m writting on smarty template but the outfit looks like this:

<ul class="second-categories">
<ul class="second-categories">
<ul class="third-categories" style="display: none;">
  <li style="padding-left: 13px;">
</ul>
<ul class="second-categories">
<ul class="second-categories">
<ul class="third-categories" style="display: none;">
  <li style="padding-left: 13px;">
  <li style="padding-left: 13px;">
</ul>
<ul class="second-categories">
</html>

When i mouseover the "second-category" ul i want the "third-categories" ul to appear.and this is happening but also I want the "third-categories" ul to stay visible when i have my mouse over it. I tried everything and i don t know what s the problem... if anybody could help would be appreciated... thanks!

Answer 1

Is this what you are looking for: Working demo http://jsfiddle.net/8gdxG/

Also your HTML looks bit wrong. ALso please note you don't need to add document ready multiple times once is suffice the need.

Rest code below will help the cause :)

JQ Code

$('.second-categories').mouseleave(function() {

        $(this).find('li ul.third-categories').each(function () {
            $(this).stop().slideUp('slow');
        });
    });

    $("ul li").mouseenter(function() { $(this).children('ul').stop().slideDown('slow'); });​

HTML Code

<ul class="second-categories">
    <li>Hulk
      <ul class="third-categories">
          <li>child1</li>
         <li>child2</li>
      </ul>
     </li>    
    <li>Ironman
     <ul class="third-categories">
          <li>child</li>
         <li>child</li>
      </ul> 
    </li>
    <li>Thor
      <ul class="third-categories">
          <li>child</li>
      </ul>              
    </li>
</ul>​