将元素定位在另一个具有绝对位置的元素下？

Question

我有一个带有下拉菜单的项目。这是 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>

所以，现在是 CSS：

div.body {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
}
div.body div.head {
background-image: url("header.png");
width: 995px;
height: 200px;
margin-left: auto;
margin-right: auto;
}
div.navbar div {
font-size: 13pt;
padding-top: 10px;
display: inline-block;
margin-left: 10px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 10px;
}
div.navbar div:hover {
background-color: #666;
}
div.navbar {
font-family: 'HelveticaNeue';
background-image: url("../newsdcs/navbarbg.png");
width: 730px;
height: 40px;
margin-top: 15px;
border-radius: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #F0F0F0;
}
div.navbar div p {
margin-top: 0;
margin-bottom: 0;
}
div.navbar div div.idd {
background-color: #666;
position: absolute;
}
a {
color: white;
text-decoration: none;
}

是的，这是 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();
            });
        });

在每个人的浏览器和计算机上，他们会得到不同的结果。有点偏离中心，在错误的地方，刷新，你会得到正确的结果，错误的结果，无论如何。如何制作一致、居中、正确且一致的下拉菜单？非常感谢！

Answer 1

我认为这样的事情可能会有所帮助。这是一个基本的 jQuery 下拉菜单，应该在所有浏览器中看起来都一样。如果可能的话，我建议将所有定位样式保留在样式表中，在这种情况下就是这样。

http://jsfiddle.net/UrGfZ/

PeterVR 也提出了一个很好的观点。如果您担心用户会阻止 JS，并希望使用老式的 HTML/CSS 设置您的导航，那么下面的小提琴将起作用。我在两个 jsFiddle 项目之间所做的唯一更改是手动将类“hasSubNav”添加到 li 中，并在 CSS 中添加一行以在悬停时显示 sub。

http://jsfiddle.net/YzPaE/

两者看起来相同，这仅取决于您想在菜单上走多远。如果您要为下拉列表等设置动画，那么 jQuery 将是您的最佳选择，否则纯 CSS 版本就像一个魅力。

Answer 2

我不想批评你，但我认为你在这里采取了错误的方法。我相信你把事情复杂化了。几点说明：

不要不要将表格用于非表格数据。它会杀死你的搜索引擎优化！菜单是链接列表，应该这样编码。子菜单应编码为嵌套列表。一个小例子：

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

我强烈建议不要将 js 用于像主导航这样基本的东西。那些禁用了 js 的用户呢（是的，他们确实存在 :-s），他们将无法浏览您的网站。始终尝试应用优雅降级的原则。在这种情况下，一个基本的下拉菜单，绝对不需要 js。只需几行适用于所有人的基本 css 即可。尝试一些教程，可能是 http://onwebdev.blogspot.com/2011/04/css-drop-down-menu-tutorial.html 之类的（只是我在 Google 上的第一个结果，那里应该有很多好的 tuts）

希望这能让你走上正轨……

Answer 3

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

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

<!-- [if IE]>
// Use this stylsheet
<![endif]>

你明白了。

您的另一个选择是去除尽可能多的边距和填充，以及浏览器解释不同的任何其他内容，并尽可能简化，然后重新定位您的元素。

如果您将样式应用于不同的标签以使它们看起来相同，那么不同的标签在不同的浏览器中看起来会有所不同。

欢迎使用跨浏览器！
-布赖恩

Answer 4

我看到大量的额外边距，等等，你可能不需要。在我看来，您正在使用 javascript 设置顶部和左侧的表格包装器。而不是这样做，我会设置 position:relative 到该包装器的容器，然后设置 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 的位置。跨浏览器支持本身就是一种艺术形式。

Answer 5

我有点不清楚为什么要使用 jQuery 进行简单导航而不是仅使用 CSS。