我有一个有三个项目的css导航栏。我想让每个链接显示自己的内容，而不是与其他链接重叠

<div class="navbar">
  <a href="#" class="link1">链接1</a>
  <a href="#" class="link2">链接2</a>
  <a href="#" class="link3">链接3</a>
</div>

.link1:hover {
  /* 设置链接1鼠标悬停时的样式 */
}

.link1:active {
  /* 设置链接1被点击时的样式 */
}

.link1:visited {
  /* 设置链接1已访问时的样式 */
}

.link2:hover {
  /* 设置链接2鼠标悬停时的样式 */
}

.link2:active {
  /* 设置链接2被点击时的样式 */
}

.link2:visited {
  /* 设置链接2已访问时的样式 */
}

.link3:hover {
  /* 设置链接3鼠标悬停时的样式 */
}

.link3:active {
  /* 设置链接3被点击时的样式 */
}

.link3:visited {
  /* 设置链接3已访问时的样式 */
}