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中添加一行以在悬停时显示子。

http://jsfiddle.net/YzPaE/

两者看起来完全相同，只取决于您想要使用菜单的距离。如果您要为下拉列表等设置动画，那么jQuery将是最佳选择，否则纯CSS版本就像魅力一样。

Answer 2

我不想批评你，但我认为你在这里采取了错误的做法。我相信你太复杂了。一些评论：

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

<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上的第一个结果，那里应该有很多好的东西）

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

Answer 3

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

使用

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

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

你明白了。

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

同样不是如果你将样式应用于不同的标签以使它们看起来相同，不同的标签在不同的浏览器中看起来不同。

欢迎使用跨浏览器！
-Brian

Answer 4

我看到你可能不需要的大量额外利润等。在我看来，你正在使用javascript为表格的包装器设置顶部和左侧。而不是这样做，我设置位置：相对于该包装的容器，然后设置左：0和顶部：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。

将元素置于另一个位置绝对的元素下？

5 个答案: