没有 javascript 的 CSS 菜单 [英] CSS Menu without javascript

问题描述

任何人都可以提供参考或者是否可以完全根据CSS 和 一点点的 javascript?

Can anybody give a reference or is it possible to create a menu entirely depending on CSS and not a single bit of javascript?

Requirement 是一个下拉菜单，可以有多个子菜单(子菜单).

The Requirement is a dropdown menu, which can have many children ( submenu ).

像这样创建的东西会跨浏览器兼容吗?

Will anything if created like this will be cross browser compatible?

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

Any help on this topic will be appreciated!.

编辑

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

Thanks for all your inputs one more doubt

这可以实现而不是使用ul li

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

say div span combination as that may help me achieving a menu which won't change my current html structure!

推荐答案

诀窍是 :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:

Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:

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

做一点造型，就完成了.

Do a bit of styling, and job done.

对于另一层菜单，它真的很简单.使用这个 CSS:

For another layer of menus, it's really simple. Use this CSS:

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

请注意，我已将 .menu>li:hover 替换为 .menu li:hover.这告诉浏览器在主菜单下找到所有 li 元素(不仅仅是直接后代)并在悬停时显示它们的子菜单.我也不再使用 submenu 类，因为如果您将 CSS 建立在后代的基础上，则实际上并不需要它.这将使您可以添加任意数量的级别.

Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.

这篇关于没有 javascript 的 CSS 菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！