Question

How can i make such thing as here: link

Now i done this so (rails haml):

= link_to "Масла/автохимия", :oil_mp, :id => "oil-dd"
          .oil-dd
            %ul
              %li
                = link_to "Масла моторные для легковых автомобилей", oils_path(:product_type_id => 13)
              %li
                = link_to "Масла трансмисионные", oils_path(:product_type_id => 15)
              %li
                = link_to "Антифризы", oils_path(:product_type_id => 3)
              %li
                = link_to "Вода дисцилированная", oils_path(:product_type_id => 6)

And my jquery code look’s so:

$("#oil-dd").mouseover(function() {
    $(".oil-dd").show();
  });
  $("#oil-dd").mouseout(function() {
    $(".oil-dd").fadeOut(2000);
  });

My main trouble is that my div with ul, which appears (“.oil-dd“) get’s dissapear, when i’m out of #oil-dd area… But how to do, that .oil-dd still is on page, even if i’m out of #oil-dd (it must show if i on .oil-dd or #oil-dd), but .oil-dd hide when i’m out of .oil-dd and #oil-dd ?

It must be as on linked page (near Автозапчасти)

in html

<a href="/catalogs/oil_mp" id="oil-dd">Масла/автохимия</a>
    <div class="oil-dd" style="display: block;">
                <ul>
                  <li>
                    <a href="/catalogs/oils?product_type_id=13">Масла моторные для легковых автомобилей</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=15">Масла трансмисионные</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=3">Антифризы</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=6">Вода дисцилированная</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=5">Моющие жидкости</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=8">Жидкости тормозные</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=18">Автокосметика/автохимия</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=7">Жидкости гидравлические</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=11">Масла прочие</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=10">Масла индустриальные</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=12">Масла для грузовых автомобилей</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=16">Смазки</a>
                  </li>
                  <li>
                    <a href="/catalogs/oils?product_type_id=17">Тех.жидкости</a>
                  </li>
                </ul>
              </div>

Answer 1

You may try something like this

​$(document).ready(function(){
    var timeOut=0;
    $("#oil-dd").mouseenter(function(){
        clearTimeout(timeOut);
        $(".oil-dd").stop(1,1).show();
    }).mouseleave(function() {
        timeOut=setTimeout(function(){
            $(".oil-dd").fadeOut(1000);
        }, 1000);

    });


    $(".oil-dd").mouseenter(function(){
        clearTimeout(timeOut);
    }).mouseleave(function(){
        timeOut=setTimeout(function(){
            $(".oil-dd").fadeOut(1000);
        }, 1000);
    });

});

An Example.