Question

多年以来，GUI标准是弹出菜单的应用程序的菜单栏，如果您单击或悬停菜单栏中的条目。有些网站也实现了这个功能，但据我所知，他们正在使用Javascript。由于不同的原因，Javascript可能是一个问题，所以问题是：这是否可以在没有Javascript的情况下实现，只使用HTML和CSS？

Answer 1

之前我做过类似的事情，这是将菜单项放在锚标签中的一个技巧，隐藏div中的子菜单隐藏在那些锚标签中。 CSS技巧是在a：hover事件期间显示内部div。

它看起来像：

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

您的里程可能会有所不同......

编辑：Internet Explorer 6及更低版本不支持除了A之外的其他元素上的：hover伪类。在更“现代”的浏览器中，可以使用这个技巧与LI，TD，DIV，SPAN一起使用，以及大多数标签。

Answer 2

看看CSS Menu Maker。

Answer 3

最着名的技术是suckerfish menus。搜索它将导致很多有趣的菜单。它只需要在IE6及更低版本中使用javascript。

Here's a list of the sons of the suckerfish menus.

Answer 4

考虑使用CSS方法作为JavaScript不可用时的备份。 JavaScript可以*为下拉菜单提供更好的用户体验，因为如果鼠标暂时离开其悬停区域，您可以添加一些延迟因子来立即停止菜单消失。纯CSS菜单有时候使用起来有点挑剔，特别是如果悬停目标很小的话。

*：当然，并非所有的菜单脚本都真的很难做到这一点......

Answer 5

您可以使用伪类：悬停来获得悬停效果。

a:link {
 color: blue;
}

a:hover {
  color: red;
}

我可以提供一个更广泛的例子但不是现在（需要让孩子去看牙医）。

Answer 6

Eric Meyer还有pure CSS menus的原始文章。

其他人现在必须提到更加强大和现代的内容，但我想我会为后人提及它。：）

如何在不使用Javascript的情况下在HTML中创建菜单？

6 个答案: