javascript - 创建一个相对于某个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，跨浏览器(和移动设备)兼容。

最好的，

辛西娅