T445

by Sunil Patel

HTML

<div class="section-44">
<h2>
<span>I want </span>
<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>
</span>
</h2>
</div>

SCSS

div.section-44 {
text-align:center;
  & span {
    display:inline-block;
        vertical-align:middle;

  }
  & ul {
    padding-left:0px;
  
    & li {
      list-style-type:none;
      background:red;
      padding:20px 40px;
      color:#fff;
      border-radius:50px;
      &:nth-child(1), &:nth-child(2),&:nth-child(4), &:nth-child(5) {
        opacity:0;
      }
    }
     &:hover {
        & li {
          opacity:1;
        }
      }
  }
}