T445

HTML

<div class="section-44">
  <h2>
    <span>I want </span>
    <div class="items">
      <span>to do A</span>
      <ul>
        <li><a href="#">to do A</a></li>
        <li><a href="#">to do B</a></li>
        <li><a href="#">to do C</a></li>
        <li><a href="#">to do D</a></li>
        <li><a href="#">s</a></li>
      </ul>
    </div>
  </h2>
</div>

SCSS

div.section-44 {
	text-align: center;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	.items {
		display: inline-block;
		position: relative;
		span {
			padding: 20px 40px;
			color: #fff;
			background: black;
			border-radius: 50px;
		}
		&:hover {
			ul {
				opacity: 1;
				transform: translateY(-50%) scale(1)
			}
		}
	}
	& ul {
		padding-left: 0px;
		position: absolute;
		right: -20px;
		top: 50%;
		transform: translateY(-50%) scale(0);
		width: 100%;
		opacity: 0;
		transition: 0.3s ease-out;
		background: green;
		border-radius: 50px;
		padding: 20px;
		& li {
			list-style-type: none;
			background: red;
			border-radius: 50px;
			color: #fff;
			padding: 20px 40px;
		}
		&:hover {
			& ul {
				opacity: 1;
				visibility: visible;
			}
		}
	}
}