css - 降低下拉表格行中文本之间的行高

Question

我有一个表行，悬停时会下拉以显示其他元素。我几乎完全按照我想要的方式拥有它，但我似乎无法降低行高并且文本行之间的空间太大。有人可以帮我解决这个问题吗？请参阅 twoguysplayingzelda.com/stackoverflow 上的示例。下拉行位于“系列”下。感谢您的帮助!

.dropdown {
  font-size: 12pt !important;
  padding-top: 2% !important;
}

.dropdown ul {
  display: none;
}

.dropdown:hover ul {
  display: block;
}


/* Tables --------------------------------------- */

.post-content table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  font-size: 0.9em;
  width: 100%;
}

.post-content th,
.post-content td {
  padding: 0px;
  margin: 0;
  overflow: visible;
  line-height: 75%;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

.post-content caption {
  text-align: center;
  padding: 2%;
}

.post-content thead {
  vertical-align: bottom;
  white-space: nowrap;
}

.post-content th {
  font-weight: bold;
}

table tr td a {
  display: block;
  height: 100%;
  width: 100%;
  padding: 2%;
}

td:hover {
  background: #f0f0f5;
}

<span id="recent-posts" style="font-size: 24pt;">Series:</span>
<table>
  <tbody>
    <tr>
      <td class="dropdown">
        Lens of Truth - Zelda Game Ranking
        <ul>
          <li><a href="http://twoguysplayingzelda.com/news/the-legend-of-zelda-
through-the-lens-of-truth/" target="_blank">The Legend of Zelda</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/zelda-ii-the-adventure-of-
link-through-the-lens-of-truth/" target="_blank">The Adventure of Link</a>
          </li>
          <li><a href="http://twoguysplayingzelda.com/news/a-link-to-the-past-through-
the-lens-of-truth/" target="_blank">A Link to the Past</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/links-awakening-through-
the-lens-of-truth/" target="_blank">Link's Awakening</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/ocarina-of-time-through-
the-lens-of-truth/" target="_blank">Ocarina of Time</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/majoras-mask-through-the-
lens-of-truth/" target="_blank">Majora's Mask</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/oracle-of-ages-and-oracle-
of-seasons-through-the-lens-of-truth/" target="_blank">Oracle of Ages/Oracle 
of Seasons</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/wind-waker-through-the-
lens-of-truth/" target="_blank">Wind Waker</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/four-swords-through-the-
lens-of-truth/" target="_blank">Four Swords</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/four-swords-adventures-
through-the-lens-of-truth/" target="_blank">Four Swords Adventures</a></li>
        </ul>
      </td>
    </tr>
    <tr>
      <td class="dropdown">
        Top 5 Zelda - Various top 5 rankings related to the Zelda franchise
        <ul>
          <li><a href="http://twoguysplayingzelda.com/news/top-five-zelda-previous-
items-i-wish-were-in-breath-of-the-wild/" target="_blank">Top Five Zelda: 
Previous Items I Wish Were in Breath of the Wild</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/top-five-zelda-enemies-i-
want-to-return/" target="_blank">Top Five Zelda: Enemies I Want To 
Return</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/top-five-zelda-starting-
areas/" target="_blank">Top Five Zelda: Starting Areas</a></li>
          <li><a href="http://twoguysplayingzelda.com/news/top-5-zelda-worthless-
facts/" target="_blank">Top 5 Zelda: Worthless Facts</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这两条规则正在影响它。您可能想添加一个类或重新分类它们，这样它们就不会影响您的实际帖子内容。根据需要调整它们。此外，您应该考虑完全删除表格，因为这不是您要呈现的表格数据。 div 中的 ul 应该就是您所需要的。

table tr td a { padding: 2%; }
.post-content li {
    margin-top: 0.5em;
    line-height: 170%;
}