CODEWITHSUNDEEP
htmlcss
rickwall
rickwall

Reputation: 59

dropdown menu not appearing when hovered

Im trying to figure out why my dropdown menu on the right insnt working when hovered. Its probably something really simply that I've missed and I'm obviously missing it! .vanish:hover .dropdown doesnt seem to be hitting the spot...What am I doing wrong?

https://plnkr.co/edit/Cnh6G1cGE1v4zCnuftgy?p=preview

.vanish:hover .dropdown {
   display: flex;
   flex-direction: column;
   position: absolute;
   left: -10px;
   top: -10px;
   background-color: #dcf1f2;
   border-radius: 10px;
}

Upvotes: 0

Views: 27

Answers (1)

Mattkwish
Mattkwish

Reputation: 770

You need to move the ul.dropdown under your li:

<li class="vanish">
  <span>Account</span>
  <ul class="dropdown">
    <li><a href="#">Login</a></li>
    <li><a href="#">Sign Up</a></li>
  </ul>
</li>

Once I did that, on hover it was properly showing the dropdown. (also you had an extra li tag)

Plunker: https://next.plnkr.co/edit/leakntv0F7pMpnWL

Upvotes: 1

Related Questions