Decrease line height between text in drop down table row - css

Question

I have a table row that drops down on hover to display additional items. I have it almost exactly how I want it, but I can't seem to decrease the line height and the text rows have too much space between them. Can someone help me fix this? Please see the example at twoguysplayingzelda.com/stackoverflow. The drop down rows are under "Series". Thanks for your help!
.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

These two rules are effecting it. You probably want to add a class or re-class these so they don't effect your actual post content. Adjust them as you see fit. Also, you should consider dropping the table entirely as this is not tabular data you are presenting. A ul in a div should be all you need.
table tr td a { padding: 2%; }
.post-content li {
margin-top: 0.5em;
line-height: 170%;
}

Answer 2

The main culprit here is the padding you've applied to the anchor elements.
.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: 0.5%;
}
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>
You've got a bit of a dropdown + accordion type thing going on that I might rework as it's a bit unintuitive. In the end, I think building this with nested ul would be a better choice. It might work something like this:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown ul {
display: none;
padding: 5px 0;
}
.dropdown ul li {
margin-left: 2em;
padding: 3px 0;
/* line-height: 40px; */
list-style: disc;
}
.dropdown a {
line-height: 20px;
}
li:hover {
background-color: #f0f0f5;
}
li:hover>ul {
display: block;
}
<h2 class="recent-posts">Series:</h2>
<ul class="dropdown">
<li>Lens of Truth - Zelda Game Ranking
<ul>
<li>
The Legend of Zelda
</li>
<li>
The Adventure of Link
</li>
<li>
A Link to the Past
</ul>
</li>
<li>Top 5 Zelda - Various top 5 rankings related to the Zelda franchise
<ul>
<li>
<a href="#" target="_blank" rel="noopener noreferrer">Top Five Zelda:
Previous Items I Wish Were in Breath of the Wild</a>
</li>
<li>
<a href="#" target="_blank" rel="noopener noreferrer">Top Five Zelda: Enemies I Want To
Return</a>
</li>
<li>
Top Five Zelda: Starting Areas
</li>
</ul>
</ul>
To adjust the line height for the dropdown links, modify the padding and/or line-height properties in the .dropdown ul li CSS selector.