没有javascript的CSS菜单

Question

任何人都可以提供参考,还是可以完全根据CSS和创建菜单 not a single bit of javascript？

要求是一个下拉菜单,可以有很多children ( submenu ).

如果这样创建会有cross browser compatible什么意义吗？

任何关于这个主题的帮助将不胜感激!

编辑

感谢您的所有投入再次怀疑

这可以实现而不是使用 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>

好？所以你的整个子菜单必须进入<li>它对应的主菜单项.然后为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基于后代,它并不是真正需要的.这将允许您添加任意数量的级别.