使用类对列表中的列表进行样式设置答案

【问题标题】：styling a list within a list with a class使用类对列表中的列表进行样式设置
【发布时间】：2020-02-05 06:46:40
【问题描述】：

我正在开发一个可访问的下拉菜单，并且有一个可以运行的示例，但是，我无法将 CSS 应用于我网站上的所有列表元素。我成功地为许多元素添加了一个类，但我在最后三个元素上遇到了麻烦。

这是我的代码：

.nav-login {
  background-color: #000;
}

.nav-login a {
  text-decoration: none;
  margin-left: 1em;
  margin-right: 1em;
}

.nav-login ul {
  list-style: none;
  padding-left: 0;
  width: 100%;
}

.nav-login li {
  color: #fff;
  text-decoration: none;
  transition-duration: 0.5s;
}

.nav-login li:hover,
.nav-login li:focus-within {
  background: #990000;
  cursor: pointer;
}

.nav-login li:focus-within a {
  outline: none;
}


/* HELP BELOW */

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.25s ease;
  display: none;
}

ul li:hover>ul,
ul li:focus-within>ul,
ul li ul:hover,
ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}

ul li ul li {
  clear: both;
  width: 100%;
}

<ul class="nav-login">
  <li><a href="#">username</a>
    <ul>
      <li><a href="#">logout</a></li>
      <li><a href="#">profile</a></li>
    </ul>
  </li>
</ul>

上面带有.nav-login 的所有内容都可以正常工作...并将其从/* HELP BELOW */ 注释下方的部分中删除。但是，我在整个站点中还有其他 ul 和 li 元素，并且不能让这个 CSS 隐藏这些元素......

如何将nav-login 类添加到这些元素中，或者如何为本部分指定它们？

【问题讨论】：

标签： html css list drop-down-menu nav

【解决方案1】：

我认为您需要将其更改为这个！

.nav-login li ul li {
  clear: both;
  width: 100%;
}

【讨论】：

【解决方案2】：

乔恩斯

据我了解，您希望将您在第一个“ul”标签中使用的“.nav-login”类应用到内部“ul”标签，因为我可以看到还有另一个类覆盖了“nav-login” " 这个内部部分的类是 ".nav-login ul"。您可以在 devtool 中看到它们。让我知道这是否有帮助或提供一些您想要实现的目标的示例。

祝你好运。请参阅屏幕截图。

【讨论】：