My links are on top of each other - html

Question

My links for some reason are on top of each other since I changed all metrics from pixels to %. Here is my code. I am pretty sure it is a simple fix, but I just can't find an answer. Here is the code:
.left_column {
line-height: 3%;
float: left;
padding: 5%;
width: 10%;
height: 70%;
border: solid;
position: relative;
top: -11%;
border: solid;
}
#nav_left_column li {
display: block;
font-family: Arial;
}
#nav_left_column a {
text-decoration: none;
color: #3e3e3e;
background-color: #ffffff;
}
#nav_left_column a:hover {
background-color: #3e5869;
color: #ffffff;
}
#nav_left_column a:visited {
color: #357c49;
background-color: #ffffff;
}
<div class="left_column">
<ul id="nav_left_column">
<li>What's New
</li>
<li>Digital News
</li>
</ul>
</div>

Answer 1

This must be the culprit:
line-height: 3%;
Because it makes the line height of the links equal to 3% of the font size instead of 3% of the height. Simply get rid of it (or just don't set it to % because you don't need to use % everywhere) and it will be fine.
** UPDATE **
Since the line-height property was there to increase the space between the lines and it didn't work, you can use this:
#nav_left_column li {
display: block;
font-family: Arial;
margin-top: 10px; /* take care of the links' claustrophobia~ */
}
Or, if you want the empty space between them to be taken by the links (in other words, the links to be "fat"):
#nav_left_column li {
display: block;
font-family: Arial;
margin-top: 10px; /* take care of the links' claustrophobia~ */
}
#nav_left_column a {
text-decoration: none;
color: #3e3e3e;
background-color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
}

Answer 2

Your issue is setting the line-height to 3%. I have no idea why you would do that, but that is stacking the links, increase the value, or just remove the rule (my recommendation), and your problem should fix.
See the alternate to line height in this answer. (Or don't use percents.)

Answer 3

The effect you are seeing is most likely a combination of the line-height and width properties. Which are effectively constraining the printable area of your container (the div) to 3% of the height of its parent container and 10% of the parents width.
.left_column {
--> line-height: 3%;
float: left;
padding: 5%;
--> width: 10%;
height: 70%;
border: solid;
position: relative;
top: -11%;
border: solid;
}
You can observe the effect by removing or altering those two properties.