В общем я хочу чтобы объекты класса .line
при наведении на .list
передвигались. Далее я планирую объектам класса .line
назначить разные transition delay
.
Или эта магия работает только с ul and li
и я зря потратил 3-4 часа.
* {
padding: 0;
margin: 0;
font-family: 'Federant', cursive;
font-size: 1vw;
box-sizing: border-box;
}
.menu {
margin: 5vw;
width: 10vw;
}
p {
border-bottom: 0.1vh solid white;
text-align: center;
padding: 2vh;
background: rgb(151, 101, 101);
width: 10vw;
height: 6vh;
}
.line,
.line2,
.line3 {
position: relative;
}
.line {
left: 500%;
}
.line2 {
top: -22vh;
display: none;
}
.line3 {
top: -45vh;
left: 25vw;
display: none;
}
.list:hover .line {
left: 100%;
}
<div class="menu">
<p class="list"> Paragraf</p>
<p class="list2"> Paragraf</p>
<p class="list3"> Paragraf</p>
<p class="line">Subparagraf</p>
<p class="line">Subparagraf</p>
<p class="line">Subparagraf</p>
<p class="line">Subparagraf</p>
<p class="line">Subparagraf</p>
<p class="line2">Subparagraf</p>
<p class="line2">Subparagraf</p>
<p class="line2">Subparagraf</p>
<p class="line2">Subparagraf</p>
<p class="line2">Subparagraf</p>
<p class="line3">Subparagraf</p>
<p class="line3">Subparagraf</p>
<p class="line3">Subparagraf</p>
<p class="line3">Subparagraf</p>
<p class="line3">Subparagraf</p>
</div>