CSS hover & position: absolute not working

I know this question has been asked a few times but none of the answers were very clear, I have written some basic code if someone could solve the code and explain why this problem happens, it would be much appreciated. The problem is .hover animation is canceled when the position is set to absolute on the footer.

https://codepen.io/HamHat/pen/zpemYz

And here is the code for future use, which seems to be a common problem.

HTML:

<footer>
  <ul>
      <li><a href="#about">About Us</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#privacy">Privacy</a></li>
  </ul>
      <div class="bear">
      <a href="google.com"><img src="https://placebear.com/g/80/80"></a>
    </div>
</footer>

CSS:

footer{
  display: flex;
  position: absolute;
  justify-content: center;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
}

ul{
  display: flex;
  list-style-type: none;
  border-radius: 5px;
}

li a{
  color: black;
  display: inline-block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover{
  background-color: white;
}

.bear {
  width: 100%;
  position: absolute;
  text-align: right;
}

bear image width was 100% thats why it was not working

footer{
  display: flex;
  position: absolute;
  justify-content: center;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: red;
}

ul{
  display: flex;
  list-style-type: none;
  border-radius: 5px;
}

li a{
  color: black;
  display: inline-block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

a:hover{
  background-color: white;
}

.bear {
  width : 10%;
  position: absolute;
  right:0;
}

<footer>
  <ul>
      <li><a href="#about">About Us</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#privacy">Privacy</a></li>
  </ul>
  <div class="bear">
      <a href="google.com"><img src="https://placebear.com/g/80/80"></a>
  </div>
</footer>