任何人都可以提供引用或是否有可能完全取决于创建菜单
CSS
和 一点 javascript 都没有
?
要求是一个下拉菜单,可以有很多children ( submenu )
。
像这样创建的任何东西都跨浏览器兼容
吗?
任何关于此主题的帮助将不胜感激!
编辑
感谢您的所有投入,还有一个疑问
这可以实现而不是使用 ul li
说 div span
组合,因为这可能会帮助我实现一个不会改变我当前 html 结构的菜单!
最佳答案
诀窍是 :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 基于后代,则实际上不需要它。这将使您可以添加任意数量的级别。
关于html - 没有javascript的CSS菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4873604/