如何仅用CSS隐藏<ul>标签且不修改HTML代码？

你的代码里有两个<ul>元素：一个是主菜单#menuPrincipal，另一个是enlace 3下方的子菜单<ul>，以下是对应不同需求的解决办法：

一、隐藏子菜单的<ul> #

永久隐藏 #

直接定位到子菜单<ul>，设置display: none即可让它完全消失：

.principal #menuPrincipal li:nth-child(3) ul {
  display: none;
}

结合复选框实现切换显示（和主菜单逻辑一致） #

如果想让用户点击enlace 3来控制子菜单的显示/隐藏，可以复用现有复选框的逻辑：

/* 默认状态下隐藏子菜单 */
.principal #submenuCheck:not(:checked) + label + ul {
  display: none;
}
/* 勾选复选框时显示子菜单 */
.principal #submenuCheck:checked + label + ul {
  display: block;
}

二、隐藏主菜单#menuPrincipal #

如果想直接把主菜单彻底隐藏，不受复选框状态影响，直接覆盖现有样式即可：

.principal #menuPrincipal {
  display: none;
}

要是你只是需要保持「默认隐藏、点击复选框展开」的原有逻辑，那你当前的CSS已经实现了这个效果，无需额外修改。

小提示 #

• display: none会让元素完全从文档流中消失，不占据页面空间；如果需要保留元素原本的位置，可改用visibility: hidden，但菜单隐藏场景一般用前者更合适。
• 编写选择器时尽量精准，避免误影响页面其他元素。

内容的提问来源于stack exchange，提问作者Terry Tataje