没有 JavaScript 的 CSS 菜单

Question

任何人都可以提供参考，或者是否可以完全依赖于创建一个菜单 CSS 和 没有一点 javascript？

要求是一个下拉菜单，可以有许多子菜单（子菜单）。

像这样创建的任何东西都会跨浏览器兼容吗？

任何有关此主题的帮助将不胜感激！

编辑

感谢您的所有输入，还有一个疑问

是否可以实现这一点，而不是使用ul li

说div span组合，因为这可以帮助我实现菜单不会改变我当前的 html 结构！

Answer 1

诀窍是 :hover 伪类。

<ul class="menu">
  <li>
    <a href="...">Menu Item 1</a>
    <ul class="submenu">
      <li><a href="...">Submenu 1</a></li>
      <li><a href="...">Submenu 2</a></li>
    </ul>
  </li>
  <li>
    <a href="...">Menu Item 2</a>
    <ul class="submenu">
      <li><a href="...">Submenu 3</a></li>
      <li><a href="...">Submenu 4</a></li>
    </ul>
  </li>
</ul>

好的？因此，您的整个子菜单必须位于其对应的主菜单项的

内。然后是 CSS：

.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }

做一些样式设置，工作就完成了。

编辑：对于另一层菜单，非常简单。使用此 CSS：

.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }

请注意，我已将 .menu>li:hover 替换为 .menu li:hover。这告诉浏览器查找主菜单下方的所有 li 元素（而不仅仅是直接后代），并在悬停时显示其子菜单。我还放弃了使用子菜单类，因为如果您将 CSS 基于后代，则实际上并不需要它。这将允许您添加任意数量的级别。

Answer 2

检查此网站：http://www.cssplay.co.uk/menus/ 其中有许多不同的菜单，仅 CSS。一个参考。

Answer 3

看看这个： http://www.cssplay.co.uk/menus/final_drop.html

Answer 4

看看这是否有帮助 http://www.howtocreate.co.uk/tutorials/testMenu.html

http://www.texaswebdevelopers.com/blog/template_permalink.asp ?id=129

Answer 5

当然可以仅使用 CSS 来制作下拉菜单，并且许多网站现在都在使用它。

CSS 还无法提供任何动画卷出等功能 - 菜单只会在可见和隐藏之间切换。如果您想要动画滚动，jQuery 可能是更好的选择。也就是说，CSS 动画确实存在。它仅在一两个浏览器中实现，但您无论如何都可以将其添加到样式表中；它不会破坏不支持它的浏览器；他们只是看不到动画。

CSS菜单的跨浏览器兼容性相对容易，只要忽略IE6即可。 IE7/8 可以毫不费力地工作，但 IE6 对于几乎所有纯 CSS 菜单技术来说都严重损坏。如果可能的话，尽量避免支持 IE6。它是一个旧的浏览器，确实需要让它安静地死去。

其他人已经提供了一些很好的例子的链接，所以我不会在这里重复。

Answer 6

我刚刚完成了针对移动设备的 CSS 菜单的开发，完全使用了零 JavaScript。基本上，通过将 tabindex="-1" 属性应用于您想要的任何内容，您可以允许该元素对 :focus CSS 属性做出反应，而无需实际成为选项卡的一部分顺序（因此您无法通过 Tab 键访问该元素）。将其应用于当前接受的解决方案：

<ul class="menu">
  <li tabindex="-1">
    Menu Item 1
    <ul class="submenu">
      <li><a href="...">Submenu 1</a></li>
      <li><a href="...">Submenu 2</a></li>
    </ul>
  </li>
  <li tabindex="-1">
    Menu Item 2
    <ul class="submenu">
      <li><a href="...">Submenu 3</a></li>
      <li><a href="...">Submenu 4</a></li>
    </ul>
  </li>
</ul>

我删除了 标签（因为现在我们的下拉菜单是可点击的，我们在我们想要点击的任何内容上插入 tabindex打开，CSS 更改为：

.menu > li:not(:focus) > .submenu { display: none; }

查看我的手机的 Codepen菜单：

• 没有 javascript
• 响应
• 式
• HTML 汉堡菜单符号！