Home/ Questions/Q 6803153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:18:34+00:00

I have tried to do a similar drop down menu like aoro dot ro.

  • 0

I have tried to do a similar drop down menu like aoro dot ro. In chrome, safari, ie6 seems to work as i aspected but in mozila Firefox 3.6 i have some problem. If I move cursor to fast my drop down disappears. I think this problem is from first elements childrens.
In this moment i dont know what im doing wrong. Thanks.

The code looks like:

    <div class="navigator">
    <ul>
    <li id="for_her"><a href="#" title="I`Parfumuri.ro | Parfumuri pentru EA"><span class="fpi"></span> Parfumuri pentru ea</a></li>

     <li id="for_him"><a href="#" title="I`Parfumuri.ro | Parfumuri pentru EL"><span class="mpi"></span> Parfumuri pentru el</a></li>

     <li id="gifts"><a href="#" title="I`Parfumuri.ro | Seturi cadou"><span class="sci"></span> Seturi Cadou</a>
    <div class="under_menu" style="display:none;">
      <div class="vertical_r">
      <h5>Cadouri pentru ea</h5>
      <ul>
      <li><a href="#">Produs 1</a></li><li><a href="#">Produs 2</a></li></ul></div>
      <div class="vertical_r">
      <h5>Cadouri pentru el</h5>
      <ul>
      <li><a href="#">Produs 1</a></li><li><a href="#">Produs 2</a></li></ul></div>
      </div>

</li>
</ul>
</div>



        $("#gifts").mouseover(function(){                        
                      $(this).children().show();                                             
        });
        $("#gifts > .under_menu").children().mouseover(function(){  

                    $("#gifts > .under_menu").show();
        });

        $(document).bind('mouseout',function(e){
                var click1 = $(e.target).attr('id');
                var click2 = $(e.target).attr('class');
                if(click1 != "gifts" || click2 != "under_menu"){
                            $(".under_menu").hide();
                    }
        });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think the problem is that you have a bit of a race condition going on here.

    if you move from one child to another child (of #gifts) then you have a mouseout and mouseover that get triggered. if the mouseout gets triggered last, then the whole menu hides.

    what you should probably do is implement a timeout of 200ms, for example) for the mouseout, and clear that timeout if it exists when a mouseover is called.

    that way the mouseout will take .2s to trigger – plenty of time for the next mouseover event to trigger.

    • 0