5

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

4

6 回答 6

12

我以前做过类似的事情，这是通过将菜单项放置在锚标记中来实现的，在这些锚标记中隐藏 div 中的子菜单。CSS 技巧是让内部 div 在 a:hover 事件期间出现。

它看起来像：

<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 和大多数任何标签。

于 2008-10-24T12:21:32.553 回答
6

看看CSS 菜单制作器。

于 2008-10-24T12:22:42.350 回答
5

最著名的技术是吸盘鱼菜单。搜索它会产生很多有趣的菜单。它只需要 IE6 及更低版本的 javascript。

这是吸盘鱼菜单的儿子列表。

于 2008-10-24T12:29:57.047 回答
2

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

*：当然，并不是所有的菜单脚本都真正费心去做这件事……

于 2008-10-24T13:25:06.780 回答
1

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

a:link {
 color: blue;
}

a:hover {
  color: red;
}

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

于 2008-10-24T12:20:13.023 回答
1

还有Eric Meyer关于纯 CSS 菜单的原创文章。

其他人现在提到的肯定会有更强大和现代的外卖，但我想我会为后代提及它。:)

于 2008-10-24T13:41:55.263 回答