оформление списка в списке с помощью класса

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

Jon S

Как я понимаю, вы хотите применить класс ".nav-login", который вы использовали в первом теге "ul", к внутреннему тегу "ul", как я вижу, есть еще один класс, который переопределяет класс "nav-login" этого внутреннего раздела, который называется ".nav-login ul". Вы можете увидеть их в devtool. Дайте мне знать, если это полезно, или приведите несколько примеров того, чего вы пытаетесь достичь.

Удачи. Смотрите скриншоты.

Answer 2

Я думаю, что вам нужно изменить это на это!

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