<div class="test">
<div class="test__container--bubbling">
<div class="test__parent--bubbling">
<ul>
<li><a class="test__child--bubbling">リスト</a></li>
<li><a class="test__child--bubbling">リスト</a></li>
<li><a class="test__child--bubbling">リスト</a></li>
<li><a class="test__child--bubbling">リスト</a></li>
<li><a class="test__child--bubbling">リスト</a></li>
<li><a class="test__child--bubbling">リスト</a></li>
</ul>
</div>
</div>
<div class="test__container">
<div class="test__parent">
<ul>
<li><a class="test__child">リスト</a></li>
<li><a class="test__child">リスト</a></li>
<li><a class="test__child">リスト</a></li>
<li><a class="test__child">リスト</a></li>
<li><a class="test__child">リスト</a></li>
<li><a class="test__child">リスト</a></li>
</ul>
</div>
</div>
</div>
.test {
display: flex;
justify-content: space-around;
margin-top: 40px;
}
.test__container,
.test__container--bubbling {
position: relative;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 35%;
height: 40px;
margin: 0 auto;
background: #333;
cursor: pointer;
&:hover .test__parent,
&:hover .test__parent--bubbling {
transform: translateY(0px);
visibility: visible;
opacity: 1;
}
}
.test__container {
&::before {
content: "バブリングなし";
color: #fff;
font-size: 12px;
}
&--bubbling::before {
content: "バブリングあり";
color: #fff;
font-size: 12px;
}
}
.test__parent,
.test__parent--bubbling {
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(10px);
transition: all .2s ease;
visibility: hidden;
opacity: 0;
}
.test__child,
.test__child--bubbling {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
font-size: 12px;
text-decoration: none;
background: #333;
color: #fff;
transition: color 1s ease, background 1s ease;
&:hover {
color: #333;
background: #666;
}
}
.test__child--bubbling {
transition: all 1s ease;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.