Jquery 将元素放置在另一个元素下并具有绝对位置？

我有一个带有下拉菜单的项目。以下是HTML：

<div class="body">
        <div class="head"></div>
        <div class="navbar">
            <div>Home</div>
            <div id="items"><p>Items</p>
                <div class="idd">
                    <table class="dd">
                        <tr>
                            <td><a href="./items/weapons.html">Weapons</a></td>
                        </tr>
                        <tr>
                            <td><a href="./items/abilities.html">Abilities</a></td>
                        </tr>
                        <tr>
                            <td><a href="./items/armor.html">Armor</a></td>
                        </tr>
                        <tr>
                            <td><a href="./items/rings.html">Rings</a></td>
                        </tr>
                    </table>
                </div>
            </div>

            <div>Sets</div>
            <div>Contact</div>
            <div>Info</div>
            <div>Donations</div>
        </div>
    </div>

是的，下面是JQuery：

$(document).ready(function(){
            window.onload = function() {
                if(!window.location.hash) {
                    window.location = window.location + '#l';
                    window.location.reload();
                }
            }
            $(".idd").hide();
            var eTop = $('#items').offset().top;
            var eLeft = $('#items').offset().left;
            var eTopA = eTop + 40;
            var eLeftA = eLeft;
            $(".idd").offset({ top: eTopA, left: eLeftA });
            $("#items").hover(function() {
                $(".idd").show();
            }, function() {
                $(".idd").hide();
            });
        });

---

在每个人的浏览器和电脑上，他们都会得到不同的结果。稍微偏离中心，在错误的地方，刷新，你会得到正确的结果，错误的结果，无论什么。如何创建一致、居中、正确且一致的下拉菜单？非常感谢

如果您想要跨浏览器的一致性，您有两个选择：

为不同的浏览器加载不同的样式表，使用

---

我看到了大量额外的页边距等，您可能不需要这些。在我看来，您正在使用javascript设置表的包装器的顶部和左侧。而不是这样做，我将设置位置：相对于包装器的容器，然后设置left:0和top:35px（或者您正在寻找的任何位置）。这将大大简化JS

我添加了这些更改，并且似乎保持一致

div#items {position:relative;}
div.navbar div div.idd {
    left:0;top:35px;
}

使用CSS做这一切的好处是，表包装器（div.idd）将始终相对于div#items进行定位，因此您只需担心div#items的位置。跨浏览器支持本身就是一种艺术形式。
我不想批评你，但我认为你在这里采取了错误的方法。我相信你把事情搞得太复杂了。几句话：

不要将表格用于非表格数据。它会杀了你！菜单是链接列表，应按此进行编码。子菜单应编码为嵌套列表。一个小例子：

<ul id='nav'>
  <li><a ..>top 1</a></li>
  <li><a ..>top2</a>
    <ul>
      <li><a ..>sub 1</a>
      <li><a ..>sub 2</a>
      ...
    </ul>
  </li>
  ...
</ul>


（这是我在谷歌上的第一个结果，应该有很多优秀的图坦卡门）

希望这能让你走上正轨……
我想这样做可能会有所帮助。它是一个基本的jQuery下拉菜单，在所有浏览器中都应该是相同的。如果可能的话，我建议在样式表中保留所有定位样式，在本例中就是这样


彼得弗也提出了一个很好的观点。如果您担心用户阻塞JS，并希望使用良好的ol’style HTML/CSS设置导航，下面的小提琴就可以了。我在两个JSFIDLE项目之间所做的唯一更改是手动将类“hasSubNav”添加到li中，并在CSS中添加一行以显示悬停的子对象


这两个看起来一模一样，这取决于你想把菜单放多远。如果您要设置下拉列表等的动画，那么jQuery将是一个不错的选择，否则纯CSS版本会很有魅力。
我有点不清楚为什么您希望使用jQuery进行简单导航，而不仅仅是使用CSS
 当然。这是一个列表，不是一个表，应该这样对待。现在，我该怎么做呢？
<ul id='nav'>
  <li><a ..>top 1</a></li>
  <li><a ..>top2</a>
    <ul>
      <li><a ..>sub 1</a>
      <li><a ..>sub 2</a>
      ...
    </ul>
  </li>
  ...
</ul>