嵌套导航菜单中的样式不同

Question

我正在使用ul ul ul li在html5中开发嵌套导航菜单，但我希望第3层元素的宽度根据选择的顶级菜单元素而不同。因此，如果我从菜单项1开始，我希望底层元素宽度为100px，但如果我从菜单项2开始，我希望底层为200px宽。

我认为我应该能够使用内联样式定义来重新定义列表中顶级项目的html代码之间的样式，但我找不到正确的语法。首先，我是以正确的方式来做这件事的吗？如果是这样，语法是什么？

ul ul ul li { width:100px }

似乎不起作用。 有什么建议吗？

Answer 1

这不会直接回答您的问题，但会帮助您了解如何通过CSS操作子元素。

您可以使用nth-child从子项列表中进行选择，以下样式从所有无序列表中选择第三行。

ul li:nth-child(3) {  
  color: #ccc;
}

请参阅https://css-tricks.com/how-nth-child-works/了解其运作方式。

或者我的简单示例：JSfiddle