Need some dropdown menu help :s

[crispybagel]

So i'm trying to figure out how to make a dropdown menu work on my webpage, i've started off quite different compared to many others which makes it kinda hard for me to understand where to go from where i'm at. Basically i want a dropdown menu like this one.

https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

heres some code:

 

HTML: 

    <a href="Completed.html">
      <div class="cat" id="Completed">
        <span class="cattext">COMPLETED</span>
        <img class="dropdown" src="Bilder/Dropdown Arrow 2.png" alt="HTML5 Icon">
      </div>
    </a>

CSS:

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  font-size: 156.25%;
  font-family: TW Cen MT Regular;
  color: white;
}
.dropdown {
  height: 15%;
  width: 10%;
  position: absolute;
  top: 45%;
  right: 4%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.cat {
  height: 100%;
  width: 12%;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  line-height: 70px;
  text-align: center;
}
.cat:hover {
  background: rgba(0, 0, 0, 1);
}
.cat:hover span{
  color: #00fff6;
}
.cat:hover .dropdown {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#Completed {
  left: 44%;
}

 

Basically its a div with a link attatched to it and inside theres text that lights up and an arrow (the image) that spins when you hover over the div.