:hover is not working on element. and its inside element

Question

adding hover effect on element is not working. maybe because of its parent element <li>. i dont know

i was trying to apply hover effect(translateY) on <a> element which is inside a <li> element.but is not working but if i apply hover(trasnlateY) on <li>. its works. can someone tell me whats the problem.

a {
  cursor: pointer;
  text-decoration: none;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease-in;
}

a:hover {
  color: aquamarine;
  transform: translateY(-10px)
}

<nav id="navbar">
  <a id="nav-brand" href="">MrinB</a>
  <div id="div-items">
    <ul id="ul-items">
      <li class="li-items"><a id="a" href=""> Home</a></li>
      <li class="li-items"><a id="a" href="">Contact</a></li>
      <li class="li-items"><a id="a" href="">About Me</a></li>
    </ul>
  </div>
</nav>

Answer 1

Add display-inline:block on a tag

a{
cursor: pointer;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 1.2rem;
font-weight: bold;
color: black;
display:inline-block;
transition: all 0.3s ease-in;}

a:hover{
color: aquamarine;
transform: translateY(-10px)}

<nav id="navbar">
    <a id="nav-brand" href="">MrinB</a>
    <div id="div-items">
        <ul id="ul-items">
            <li class="li-items"><a id="a" href=""> Home</a></li>
            <li class="li-items"><a id="a" href="">Contact</a></li>
            <li class="li-items"><a id="a" href="">About Me</a></li>
        </ul>
    </div>
</nav>