创建一个具有绝对位置的div，相对于某个div

Question

我尝试了不同的方法，但无济于事。

我有：

<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>

现在，当用户将鼠标悬停在链接3上时，我希望在其下方显示一个div，其位置绝对，z-index高于页面上的其他内容。

喜欢

Link1 link 2 link3
         [ linkindiv  ]
         [ link2indiv ]

这是我用来显示和隐藏的jquery代码。

            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

这听起来像你正在尝试创建一个水平导航栏。 你有没有尝试使用列表而不是div？

我创建了一个JsFiddle来演示： http ： //jsfiddle.net/g8WUA/

不需要JavaScript和跨浏览器（和移动）兼容。

最好，

辛西娅

Answer 2

在这里，我已经使用java脚本完成了关于垃圾箱的完整解决方案。

演示： 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';
    }
}