css/sass "disables" my submenu links - html

Question

I tried not to include the code that was unnecessary so you may immediately see the problem. This code works when I comment out the specified code below or if I change the styling (i.e opacity). But I want the style to look like the submenu is coming down from the nav-bar and not just appear and hide below the nav-bar. At first, I thought it was a jekyll problem but after several trial and errors I found out that this was more of a styling problem.
<div id="navigation">
<nav class="nav-main row">
<div class="logo">
<p>Anatomy &<br>
Physiology</p></div>
<ul>
<li>
HOME
</li>
<li>
SYSTEMS
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>SKELETAL SYSTEM</li>
<li>MUSCULAR SYSTEM</li>
<li>CARDIOVASCULAR SYSTEM</li>
<li>DIGESTIVE SYSTEM</li>
<li>ENDOCRINE SYSTEM</li>
<li>NERVOUS SYSTEM</li>
<li>RESPIRATORY SYSTEM</li>
<li>IMMUNE/LYMPHATIC SYSTEM</li>
<li>URINARY SYSTEM</li>
<li>FEMALE REPRODUCTIVE SYSTEM</li>
<li>MALE REPRODUCTIVE SYSTEM</li>
<li>INTEGUMENTARY SYSTEM</li>
</ul>
</div>
</div>
</li>
<li>
LESSON GUIDE
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
.nav-main {
ul {
}
}
.nav-item {
&:hover {
background-color: $nav-hover-color;
color: $text-color-hover;
#include transition(background-color, 0.6s, ease-in-out);
}
&:focus{
background-color: $nav-hover-color;
color: $text-color-hover;
~ .nav-content{
max-height: 800px;
#include transition(max-height, 0.7s, ease-in);
}
}
}
}
.nav-content {
padding-right: 10px;
position: relative;
top: 5px;
overflow: hidden; <--(when commented out, link works)
max-height: 0; <--(when commented out, link works)
background-color: $nav-hover-color;
z-index: 50;
border-radius: 4px;

Answer 1

This should work. It is taken from the code of default jekyll website:
<li>SKELETAL SYSTEM</li>
Make sure you have set baseurl: "" in _config.yml, properly.
See this article about baseurl.

Answer 2

If the base URL is the root of your domain (and if you're sure that this will never change!), you can get this to work without setting baseurl in _config.yml (as suggested in the other answer).
Just make the link start with /:
<li>SKELETAL SYSTEM</li>
The leading slash indicates your domain's root, so the link in the previous example actually goes to http://yourdomain.com/systems/index.html
That's why the first link in your code probably works without setting baseurl in the config file:
<li class="two columns">
HOME
</li>