Creating a div with absolute position, relative to a certain div

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

Answer 2

Here i have done complete solution on bins using java script for above issue.

DEMO: http://codebins.com/bin/4ldqp9z

HTML:

<div id="menu">
  <a id="1" href="#1">
    Link 1
  </a>

  <a id="2" href="#2">
    Link 2
  </a>

  <a id="linkid" href="#3">
    Link 3
  </a>
</div>
<div id="dropdown_div">
  <div>
    <a href="#">
      Linkindiv
    </a>
  </div>
  <div>
    <a href="#">
      Link2indiv
    </a>
  </div>
</div>

CSS:

#menu{
  width:750px;
  border:1px solid #546588;
  padding"5px";
  background:#88f8fd;
}
#menu a{
  display:inline-block;
  padding:5px;
  text-decoration:none;
  width:70px;
  color:#1122ff;
}
#menu a:hover{
  background:#55a899;
  text-decoration:underline;
}
#dropdown_div{
  display:none;
  position:absolute;
  border:1px solid #546588;
  background:#88f8fd;
  width:70px;
}
#dropdown_div a{

  text-decoration:none;
  color:#1122ff;
}
#dropdown_div div:hover{

  background:#55a899;
}
#dropdown_div div:hover a{

  text-decoration:underline;
}

Javascript:

var MenuDiv = document.getElementById('menu');
var menulinks = MenuDiv.getElementsByTagName('a');
var dropdown_div = document.getElementById('dropdown_div');
var i = 0;
//bind mouseover and mouseout event with each link
for (i = 0; i < menulinks.length; i++) {
    menulinks[i].onmouseover = function() {
        var mTop = this.offsetTop + MenuDiv.offsetHeight + 1;
        var mLeft = this.offsetLeft;
        dropdown_div.style.top = mTop;
        dropdown_div.style.left = mLeft;
        dropdown_div.style.display = 'block';

    }
    menulinks[i].onmouseout = function() {
        dropdown_div.style.display = 'none';
    }
}