what is the reason of the distance?

Question

when i hover over my link and li , there is 1 or less px distance , at the first i wrote padding : 0 10px and when i changed top & bottom's padding to 1px and more that distance Disappears. can anyone tell me why this is happenig? thank you

.menu {
  margin: 0 5px;
}
.menu ul {
  list-style: none;
  background-color: #e0f0ff;
  direction: rtl;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  font-size: 18px;
}
.menu ul li {
  float: right;
}
ul::after {
  content: "";
  display: block;
  clear: both;
}
a {
  text-decoration: none;
  display: block;
  padding: 10px;
}
a:hover {
  background-color: greenyellow;
  color: darkgray;
}

 <div class="menu">
        <ul>
          <li><a href="">main page</a></li>
          <li><a href="">shopping</a></li>
          <li><a href="">working with us</a></li>
          <li><a href="">adds</a></li>
          <li><a href="">about us </a></li>
          <li><a href="">contact us </a></li>
        </ul>
      </div>