为什么将第5个元素下移？

Question

body {
  margin: 0;
}

div {
  margin: 0;
}

li {
  display: inline-block;
  width: 20%;
  padding-top: ;
}

ul {
  background-color: green;
}

ul:hover {
  background-color: green;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  top: 200px;
  box-shadow: 2px 2px 5px black;
}

<div container>
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

您好，我目前正在尝试建立一个网站，但是我只能在1行中建立这些链接。我将宽度设置为20％，并且我认为应该将其对齐，因为20 * 5 = 100，但是它似乎并不是那样工作。我想就如何更改每种颜色提供一些建议？例如第一个蓝色第二个黄色黄色第三个蓝色等等，因为我找不到如何做的任何地方。预先感谢。