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
    25 ноя 2018 в 16:46
  • предполагал такое ( 25 ноя 2018 в 18:43
  • Булат Мустафин, я можно сказать погорячился, но все же прав... Лучше переписать html... Можно и так решить вопрос, но тебе надо что бы при наведении, у того блока на который наводишь блок расширялся и выезжающий блок был при на ведении оказался внутри тогда при наведении на submenu курсор останется в пределах блока на который наводишь... Но даже если перепишешь html, так же надо будет сделать, но это будет правильней.. так что переписывай...
    – Air
    25 ноя 2018 в 19:10

1 ответ 1

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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