Submenu doesn't render correctly on screen resize (and unexpected behaviour)

Question

I have 5 links on my vertical nav. On screen resize my vertical nav becomes a horizontal nav with three (of those 5 links) showing and another link called menu which displays the other two remaining links.

For some reason, on screen resize, when menu appears, the list content is already displayed and then when menu is clicked, it leaves the hover properties even when you're not hovering over it. Here are visuals:

1. On screen resize, it appears like this:

2. When hovering over menu:

Which is OK. I only want the links to appear when the menu link is clicked, not hovered over. But I do not understand why menu talking up two li spaces.

3. When clicking menu:

This is OK. However, note how the Menu li is now perfectly sized.

4. After clicking on menu and then moving the mouse away from the link:

As mentioned, I do not know what's causing these issues.

Here is my current approach:

$(document).ready(function() {
  $(".show").click(function() {
    $(".subMenu").toggleClass("active");
    return false;
  });
});

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
  display: none;
}

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  /* make div span div */
  padding: 0px;
}

.nav ul li {
  list-style-type: none;
}

.nav li:hover a {
  color: #f4f3f3;
}

.active {
  text-align: left;
  padding-left: 15px;
  text-decoration: none;
  background-color: #333;
  color: #f4f3f3;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .socials {
    display: none;
  }
  .hide {
    display: none;
  }
  .show {
    display: inline-block !important;
  }
  .nav ul li {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul>
          <li><a class="nav-link active" href="">Test 1</a></li>
          <li><a class="nav-link " href="">Test 2</a></li>
          <li><a class="nav-link" href="">Test 3</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
          <li class="show"><a class="nav-link" href="">Menu</a>
            <ul class="subMenu">
              <li><a class="nav-link" href="">Test 4</a></li>
              <li><a class="nav-link" href="">Test 5</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Answer 1

Explanation:

You have so many things messed up. Most important to note is that sub elements are inheriting from main elements. For example, if we have the following HTML:

<ul id="main_menu">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>
         <ul id="sub_menu">
             <li>sub list item 1</li>
         </ul>
    </li>
</ul>

And this CSS:

#main_menu li {/* This styling will also be applied to sub_menu!! */
    color: red;
}

So if you want to apply to only direct li under main menu, use > which means only direct elements, like so:

#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */
    color: red;
}

Fixing the problem:

1- Add !important to sub menu:

ul.subMenu {
    display: none !important;
}

2- Comment or remove this line:

.nav li:hover a {
    /* color: #f4f3f3; */
}

3- Your sub menu is inheriting some unwanted styling from the main menu. Add these should fix it for you:

.subMenu a.nav-link {
    background-color: #f4f3f3;
    color: #333;
}
.subMenu a.nav-link:hover {
    background-color: #333;
    color: #f4f3f3;
}
.subMenu.active {
    display: block !important;
}

Here's a demo.