Question

I’ve tried different methods but come to no avail.

I have:

<div>
    <a id="" href="">Link 1</a> <a id="2" href="">Link 2</a> <a id="linkid" href="">Link 3</a>
</div>
<div id="dropdown_div" style="display:none;">
   Linkindiv
   Link2indiv
</div>

Now when a user hovers over Link 3, I want a div to show up right underneath it positioned absolute with z-index higher than the other stuff on the page.

Like

Link1 link 2 link3
         [ linkindiv  ]
         [ link2indiv ]

Here is the jquery code I’ve been using to show and hide.

            var hide = false;
            jQuery("#linkid").hover(function(){
                if (hide) clearTimeout(hide);
                jQuery("#dropdown_div").fadeIn();
            }, function() {
                hide = setTimeout(function() {jQuery("#dropdown_div").fadeOut("slow");}, 250);
            });
            jQuery("#dropdown_div").hover(function(){
                if (hide) clearTimeout(hide);
            }, function() {
                hide = setTimeout(function() {jQuery("#dropdown_div").fadeOut("slow");}, 250);
            });

Answer 1

This sounds like you’re trying to create a horizontal nav bar. Have you tried doing it using lists instead of divs?

I created a JsFiddle to demonstrate: http://jsfiddle.net/g8WUA/

No javascript required and cross browser (and mobile) compatible.

Best,

Cynthia