Помогите доделать меню на 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>
html
... Можно и так решить вопрос, но тебе надо что бы при наведении, у того блока на который наводишь блок расширялся и выезжающий блок был при на ведении оказался внутри тогда при наведении наsubmenu
курсор останется в пределах блока на который наводишь... Но даже если перепишешьhtml
, так же надо будет сделать, но это будет правильней.. так что переписывай...