как доделать меню на чистом css?

183
10 мая 2019, 13:10

Помогите доделать меню на 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>

Answer 1

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

#p1:hover #sp1,
#p2:hover #sp2,
#p3:hover #sp3
{
  display: block;
  transform: translateX(0);
  height: auto;
}
READ ALSO
jQuery filidownload - в failCallback не приходит ошибка из Asp Web Api метода

jQuery filidownload - в failCallback не приходит ошибка из Asp Web Api метода

На стороне сервера срабатывает catch блокЭто правильно, ожидаемый результат:

150
Библиотека классов C#. Загрузка текстовых файлов в массив строк

Библиотека классов C#. Загрузка текстовых файлов в массив строк

Есть библиотека классов, которая использует большой массив строкЭти строки должны загружаться из 4 текстовых файлов (текстовые файлы - постоянные,...

158