hover'+' на классах при наведении не работает

При наведении на Home, должно появится Home2 hover не долно быть на ul так как в ul будут несколько элементов

.fixed {
  font-size: 50px;
  text-align: center;
  font-weight: bold;
  list-style: none;
}

.fixed>li {
  margin: 20px;
  position: relative;
  z-index: 5;
}

.fixed>li:hover {
  cursor: pointer;
}

.anim {
  list-style: none;
  color: #2295F5;
  font-size: 130px;
  font-weight: bold;
  text-align: center;
}

.anim>li {
  position: absolute;
  left: 0px;
  top: 0px;
  left: 50%;
  margin-left: -320px;
  top: 50%;
  margin-top: -75px;
  display: none;
}

.home:hover+.home-sec {
  display: block;
}
.about:hover + .about-sec{
  display: block;
}
<ul class="fixed">
  <li class="home">HOME</li>
  <li class = "about">ABOUT</li>
</ul>
<ul class="anim">
  <li class="home-sec">HOME2</li>
  <li class = "about-sec">ABOUT</li>
</ul>


Ответы (1 шт):

Автор решения: Инквизитор
  1. Сформулируйте вопрос более понятно.
  2. Очистите код от лишней визуальщины.
  3. Классы в вашем коде не соответствуют вопросу.
  4. Проверьте собственные навыки верстки:

Такая конструкция:

.home:hover+.home-sec {display: block;}

как и такая:

.about:hover + .about-sec{display: block;}

у вас попросту отсуствуют.

→ Ссылка