<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;
}