html - 无序列表中的无序列表 - 选择特定的行元素

标签 html css navigation html-lists

我正在构建一个带有下拉菜单的导航。我希望包含无序列表 subnav 的行元素在悬停时具有白色 anchor 文本。我已经这样做了,但是我的选择器导致其中一个下拉行元素出现错误。请参阅:http://jsfiddle.net/W3Dzd/ 如果您将鼠标悬停在“sui generis”上并将光标向下移动到菜单上,它可以正常工作,但“mantels”除外 - anchor 文本在悬停时不会改变颜色。 我想发生的事情是主导航中第三行元素的选择器也选择了子导航中的第三行元素。 有人可以建议更好的选择器或解决方法吗?

最佳答案

如果您可以更改生成菜单的代码(或者如果您手动编码它们,则手动更改它们),您将通过将子菜单类应用于父级 li 而不是子 ul。您之前的代码是通过复杂的选择器定位特定的列表项,如果您重新排列菜单或从中添加/删除元素,这些选择器将会中断。新代码将毫无问题地处理这些情况。

您可以在这个更新的 jsFiddle 上看到一个示例,说明它是如何工作的:http://jsfiddle.net/W3Dzd/4/

关于html - 无序列表中的无序列表 - 选择特定的行元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8851890/

相关文章:

css - angularjs 绑定(bind) nbsp 实体在 IE 中不起作用

algorithm - TERCOM 算法 - 在 CUDA 中从单线程变为多线程

html - 圆 Angular TD 不工作

javascript - 在 JQuery 选择器中添加变量时出现问题

javascript - 如何使用 Jquery 让只有 1 个输入框在焦点上做动画

javascript - 如何用div缩放div的内容?

html - 具有行扩展的 PrimeNG 数据表调用新服务并连续显示数据 Angular 5

css - 使用 Bootstrap 4 beta 在 div 中水平居中选择

html - CSS 将导航扩展到内容长度

html - Bootstrap 自动缩放导航栏