css - WordPress TwentyTen 菜单：如何 CSS 选择特定位置的子菜单？

Question

我正在设计 WordPress TwentyTen 主题的顶部菜单。

我希望第一个菜单项的所有子菜单都是 200px 宽，

第二个菜单项的所有子菜单为 250px 宽，

第三个菜单项的所有子菜单为 300px 宽。

例如，菜单具有以下结构：

关于

服务

产品

我希望 ABOUT 下的所有项目宽度为 200px，SERVICES 下的所有项目宽度为 250px，PRODUCTS 下的所有项目宽度为 300px。

如何仅使用 CSS 在 WordPress 中选择它们？（考虑到菜单是动态生成的，而且表头只有 wp_nav_menu 命令？）

score 2 · Accepted Answer

假设您正在使用在外观/菜单管理界面页面下定义的自定义菜单结构，您可以从那里将 CSS 类添加到每个子菜单项。

转到管理页面，然后选择顶部的“屏幕选项”。在那里，您会在“显示高级菜单属性”下找到一系列复选框。其中之一是“CSS 类”。勾选该框后，您应该会发现每个子菜单选项窗格现在都有一个“CSS 类（可选）”文本框，您可以在其中添加一个或多个类。

完成后，您可以随心所欲地设计风格......

score 0 · Accepted Answer

使用匹配每个级别的 css 选择器。像这样：

#access ul {
   width: 200px;
}
#access ul ul {
   width: 250px;
}
#access ul ul ul {
   width: 300px;
}

2 回答 2