Question

i have created a dynamic side category menu…..in jquery, But its sometimes doesn’t work properly…i dont know the reason behind,,,, i’d given the code static (picked from the firebug). plz see it soon & if the code could be more better and the menu could more smooth in working than it is(given), then plz provide me that code or link…
thnku

javascript(with static id etc.)

problem:

if i fastly more than one times hover on that li, it gets sliding up & sliding down repeating itself as much times as hover on it………. ??????????

 $(document).ready(function () { $(' #cate_id2 > ul').show(); });
        $(document).ready(function () {
            $(' #cate_id2 > ul > #subcate_id4 > div').hide();

            $(' #cate_id2 > ul > #subcate_id4 ').hover(function () {
                $(' #cate_id2 > ul > #subcate_id4 > div').slideDown("fast");
            },

           function () {
               $(' #cate_id2 > ul > #subcate_id4 > div').slideUp("fast");
           });
        });

html(static code)

         <li id="cate_id2">
               <a href="CateProducts.aspx">Laptops &amp; Notebooks</a>  
            <ul style="display: block;">
               <li id="subcate_id3">
                     <a href="SubCateProducts.aspx"> MACS</a>
               </li>
               <li id="subcate_id4">
                     <a href="SubCateProducts.aspx"> Windows</a>
                <div style="border: 1px solid black; display: none;">
                   <ul style="border: 1px solid black; display: block;">
                      <li><a href="SubSubCateProducts.aspx">notebook</a></li>
                      <li><a href="SubSubCateProducts.aspx">probook</a></li>
                   </ul>
                </div>
               </li>
             </ul>
          </li>

if u will provide me the code , better then given above
i will convert that(your) code into dynamic myself …….

Answer 1

you could make cleaner:

$(function () {
   $('#cate_id2 > ul').show();
   $('#cate_id2 > ul > li')
        .on('mouseover', function () {
            $(this).find('div').stop(true, true).slideDown();
        })
        .on('mouseout', function () {
            $(this).find('div').stop(true, true).slideUp();
        });
});