html - td 悬停真的卡在这里

Question

我是网络应用的新手，请多关照我尝试使用表格和标签创建导航它以这种方式构建

td {
  padding: 10px;
}
a {
  text-decoration: none;
}
td a:hover {
  display: inline-block;
  padding: 25px 0;
}

<table class="navigation" border="solid 2">
  <tr>
    <td class="1"><a href="#">Home</a>
    </td>
    <td><a href="#">Registrasi</a>
    </td>
    <td><a href="#">Panduan</a>
    </td>
    <td><a href="#">Hubungi Kami</a>
    </td>
  </tr>
</table>

我真正想要的是每个td都长得更长这意味着我想在链接的顶部和底部放置一些空间，使它们看起来很漂亮

但是当我悬停它时，它完全没有任何意义。所有的人都在同时变长，即使我徘徊在第一个 td最后一个 td 做同样的事情。

请帮忙.. :(对不起我的英语

Answer 1

您的所有表格行都随着 :hover 增加，因为您所有的行单元格共享相同的高度。

尝试在菜单中使用 ul 和 li 元素。它在语义上更好，它将解决您的问题。