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

Question

我正在使用一个可访问的下拉菜单，并且有一个示例在运行，但是，我无法将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类添加到这些元素，或者如何在本节中指定它们？

Answer 1

我认为您需要将其更改为此！

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

Answer 2

Jon S

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

祝你好运。查看屏幕截图。