0

Помогите доделать меню на CSS. Проблема в том что я не знаю как заставить все .line стоять на месте когда курсор убран с .list

css * {
  padding: 0;
  margin: 0;
  font-family: 'Federant', cursive;
  font-size: 1vw;
  color: white;
}

.menu {
  margin: 5vw;
  width: 10vw;
}

p {
  border-bottom: 0.1vh solid white;
  text-align: center;
  padding: 1vh 1vw 1vh 1vw;
  background: rgb(55, 100, 96);
  width: 10vw;
  height: 2vh;
}

.line,
.line2,
.line3 {
  left: 12vw;
  left: 1000%;
  position: relative;
}

.line {
  top: -12.3vh;
}

.line2 {
  top: -28.7vh;
}

.line3 {
  top: -45.1vh;
}

.list:hover~.line {
  left: 12vw;
}

.list2:hover~.line2 {
  left: 12vw;
}

.list3:hover~.line3 {
  left: 12vw;
}

.line:hover {
  left: 12vw;
}

.time {
  transition: 0.1s;
}

.time2 {
  transition: 0.2s;
}

.time3 {
  transition: 0.3s;
}

.time4 {
  transition: 0.4s;
}

.time5 {
  transition: 0.6s;
}
<div class="menu">
  <p class="list"> Paragraf</p>
  <p class="list2"> Paragraf</p>
  <p class="list3"> Paragraf</p>
  <p class="linestop line time">Subparagraf</p>
  <p class="linestop line time2">Subparagraf</p>
  <p class="linestop line time3">Subparagraf</p>
  <p class="linestop line time4">Subparagraf</p>
  <p class="linestop line time5">Subparagraf</p>
  <p class="line2 time">Subpar</p>
  <p class="line2 time2">Subparagraf</p>
  <p class="line2 time3">Subparagraf</p>
  <p class="line2 time4">Subparagraf</p>
  <p class="line2 time5">Subparagraf</p>
  <p class="line3 time">Subparagraf</p>
  <p class="line3 time2">Subparagraf</p>
  <p class="line3 time3">Subparagraf</p>
  <p class="line3 time4">Subparagraf</p>
  <p class="line3 time5">Subparagraf</p>
</div>

3
  • 2
    С такой структурой ни как на CSS, только js, и то будет грубо, надо весь html переписывать... дочерние должны быть вложены
    – Air
    Commented 25 нояб. 2018 в 16:46
  • предполагал такое ( Commented 25 нояб. 2018 в 18:43
  • Булат Мустафин, я можно сказать погорячился, но все же прав... Лучше переписать html... Можно и так решить вопрос, но тебе надо что бы при наведении, у того блока на который наводишь блок расширялся и выезжающий блок был при на ведении оказался внутри тогда при наведении на submenu курсор останется в пределах блока на который наводишь... Но даже если перепишешь html, так же надо будет сделать, но это будет правильней.. так что переписывай...
    – Air
    Commented 25 нояб. 2018 в 19:10

1 ответ 1

0

можно попробовать вот так

#p1:hover #sp1,
#p2:hover #sp2,
#p3:hover #sp3
{
  display: block;
  transform: translateX(0);
  height: auto;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.