是否有比纯CSS 2更好的、符合标准的方法来降低站点的导航？

Question

我们都看到了许多CSS 2下拉菜单，而这些曾经是最好的方式，为一个网站下拉菜单。然而，我想知道：

有了这些新技术的，是否有比CSS 2更好的方法来制作下拉菜单:悬停隐藏的div菜单？

我仍然使用旧的CSS 2悬停菜单的原因是，我还没有找到其他的东西，即跨浏览器兼容、简单、符合标准，并被同样多的最终用户正确地查看。

底线是，我想在网站开发的各个方面尽可能地向前推进，但这是一个我不确定是否安全向前推进的领域。

是时候放弃“站点不应该完全依赖javascript”的标准了，开始使用jQuery下拉菜单了吗？

Answer 1

当前网络开发领域的想法是，你应该采取一种渐进的增强方法来构建你的网站。这是一种自下而上的分层方法:基本内容(语义HTML)构成基础，外观和感觉(CSS)放在顶部，最后功能位于它们的顶端(由JavaScript提供)。

您所讨论的方法将是前面描述的前两层(HTML和CSS)。除此之外，您还可以使用jQuery为菜单提供功能或额外的花哨操作，前提是要低调地(即，使用jquery选择器以编程方式连接事件)。例如，您可以使用jQuery使菜单在悬停时淡入淡出。

现在，重要的一点是要认识到，您不必放弃CSS来做这种事情-这不是一个两类/或类型的问题。通过这样的分层，和不引人注目地使用JavaScript，您将得到一个网站，将完美地为所有的访问者！那些没有JavaScript和没有CSS的用户将获得基本的内容，并且可以浏览您的站点(尽管它看起来并不漂亮！)那些没有javascript但带有CSS的菜单仍然是一个基本的菜单，在悬停时会有下拉菜单，只使用CSS样式。使用JavaScript和CSS的用户将获得站点的最佳表示，CSS提供外观和感觉，JavaScript提供额外的功能/效果。

你应该从中学到的是，网站不需要在每一个浏览器中看上去都一样。对于没有能力的浏览器，请确保内容可以不受阻碍地以其基本形式呈现。对于功能更强的浏览器，可以添加额外的样式和功能层，以利用其更高级的功能。基本上，每个人都可以按预期访问您的内容，并且您仍然可以进一步推动您的web开发:)

本文比以往任何时候都更好地阐述了这个概念：http://www.alistapart.com/articles/understandingprogressiveenhancement

Answer 2

分离关注点和正确使用CSS和HTML，否则就要求如此。如果正确使用HTML (显示内容)，导航应该如下所示：

<ul id="nav">
    <li>
      <a href="#">Home</a>
      <ul>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
        <li>
          Sub Menu Item
        </li>
      </ul>
    </li>
  </ul>

当然，它是冗长的，但它显示的内容，它的语义，有效和浏览器兼容。作为额外的奖励，没有CSS它看起来很好。

正确地使用CSS，我们将添加以下内容：

#nav 
  {
    padding:5px;
    margin:0;
   }
  #nav > li{
    display:inline;
    position:relative;
  }
  #nav > li ul
  {
    position:absolute;
    width:150px;
    background-color:red;
    color:#fff;
    left:0;
    margin:0;
    padding:0;
    display:none;
  }
  #nav > li ul li{
    display:block;
  }
  #nav > li:hover ul
  {
    display:block;
}

这是相当简单的，我甚至在那里添加了一些不相关的造型。我使用了直接后代选择器(element > element)，所以它不能在旧的IE中工作，但是如果重构它，这将完全跨浏览器兼容。更别提它既有效又简单。

您似乎自相矛盾:您希望接触尽可能多的用户，但是继续前进，并且考虑使用JavaScript。为什么？通常，如果禁用JavaScript，则JavaScript方法会使子菜单项不可访问。

而JavaScript是用于交互改进的。您可以提出这样的论点，即鼠标悬停菜单是“交互”，但我认为它是风格的，而且它最容易以这种方式实现。

也许我在这里遗漏了一些东西；但是CSS + HTML似乎是一个很好的解决方案，一点也不不雅、不语义、不兼容或无效。如果我错了，请纠正我。