مشکل در hover:

سلام دوستان

امیدوارم حال همگی خوب باشه

در کد زیر hover: اصلا اعمال نمیشه اگر راهنمایی کنید مشکل از کجاست خیلی ممنون میشم.

<span id="navigation" class="position-fixed">
      <div id="works" class="my-2 text-center"><a href="">works</a></div>
      <div id="about" class="my-2 text-center"><a href="">about</a></div>
      <div id="contact" class="my-2 text-center"><a href="">contact me</a></div>
</span>

#navigation {
  direction: rtl;
  right: 6px;
  top: 50vh;
  z-index: 10;
  font-size: 17px;
}
#navigation div {
  background-color: #c1c9c9;
  max-height: 5px;
  max-width: 50px;
  overflow: hidden;
  border-radius: 5px;
}
#navigation div a {
  visibility: hidden;
}
#navigation:hover #navigation div a{
    visibility: visible;
    cursor: pointer;
}
#navigation:hover #navigation div{
    max-height: 250px;
}