Show active parent with matching submenu when page is loaded jQuery

I am working on a website where I am trying to achieve the following:

When the user clicks on a link, that link shall get an active status and the matching submenu shall become active also. When the user hovers over another link the active sub menu shall not be displayed. I have achieved that the current link is in an active status that matches the url but I can't get the matching submenu to show up. I don't know much about jQuery so I might I have stumbled upon the answer without knowing it. Here is some of the code as the website is currently on localhost.

HTML:

<div class="menu-container-portal">
   <a class="toggle-menu" href="#" style="display: none;">
   <img src="/images/18.612e0c6d167074c5746476/1542016024414/menu-icon.png" alt="Meny"></a>
   <ul class="nav">
      <li class="">
         <a href="/upplevbesok.4.612e0c6d167074c5746203.html">Upplev &amp; Besök</a>
         <img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
         <ul class="sub">
            <div class="test1">
               <li class="">
                  <a href="/upplevbesok/bostader.4.612e0c6d167074c574620a.html">Bostäder</a>
               </li>
               <li>
                  <a href="/upplevbesok/evenemang.4.612e0c6d167074c574620d.html">Evenemang</a>
               </li>
               <li>
                  <a href="/upplevbesok/kopia1avupplevbesok.4.3f2c25fb16763705a3d1.html">Kopia (1) av Upplev &amp; Besök</a>
               </li>
               <li>
                  <a href="/upplevbesok/kopia4avbostader.4.612e0c6d167074c57461d6.html">Kopia (4) av Bostäder</a>
               </li>
               <li>
                  <a href="/upplevbesok/matochdryck.4.612e0c6d167074c57461f2.html">Mat och dryck</a>
               </li>
               <li>
                  <a href="/upplevbesok/shopping.4.612e0c6d167074c57461ca.html">Shopping</a>
               </li>
            </div>
         </ul>
      </li>
      <li>
         <a href="/boleva.4.612e0c6d167074c5746210.html">Bo &amp; Leva</a>
         <img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
         <ul class="sub">
            <div class="test1">
               <li>
                  <a href="/boleva/bostader.4.612e0c6d167074c57461c4.html">Bostäder</a>
               </li>
            </div>
         </ul>
      </li>
      <li> 
         <a href="/flyttahitjobba.4.612e0c6d167074c57461ed.html">Flytta hit &amp; Jobba</a>
      </li>
      <li>
         <a href="/naringsliv.4.612e0c6d167074c5746212.html">Näringsliv</a>
         <img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
         <ul class="sub">
            <div class="test1">
               <li>
                  <a href="/naringsliv/bostader.4.612e0c6d167074c5746216.html">Bostäder</a>
               </li>
            </div>
         </ul>
      </li>
      <li> 
         <a href="/kontaktaoss.4.612e0c6d167074c57461d1.html">Kontakta oss</a>
      </li>
   </ul>
</div>

CSS:

.menu-container-portal ul {
    margin: 0;
    padding: 0;
}

.active {
    background: #2b90f5;
    overflow: hidden;
}

.menu-container-portal li:hover>a {
    color: #fff;
    background: #304040;
    opacity: .7;
}

.menu-container-portal li {
    margin: 0;
    padding: 0;
    /*width: 100%;*/
    height: 15%;
    /*display: inline-block;*/
    ;
}

.menu-container-portal a {
    text-decoration: none;
}

.menu-container-portal a:hover {
    color: #dadcdf;
    background: #304040;
    padding-bottom: 10px;
}


/*.menu-container-portal {
    max-width: 900px;
    margin: 10px auto;
}*/


/*.menu-container-portal {
    max-width: 900px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 20px;
    margin-left: 15px;
    white-space: nowrap;
     text-align:left;
} */

.menu-container-portal {
    max-width: 1100px;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 20px;
    /* margin-left: 15px; */
    white-space: nowrap;
    text-align: left;
    margin-left: 22.5%;
}

.toggle-menu {
    display: none;
    /*background: #404040;*/
    padding: 10px 15px;
    color: #fff;
}

.toggle-menu:hover {
    opacity: 0.7;
}

.nav {
    list-style: none;
    *zoom: 1;
    /*background:#404040;*/
    display: flex;
    justify-content: left;
}

.nav:before,
.nav:after {
    content: " ";
    display: table;
}

.nav:after {
    clear: both;
}

.nav ul {
    list-style: none;
    width: 100%;
    text-align: center;
}

.nav a {
    padding: 10px 15px;
    color: #101210;
    *zoom: 1;
}

.nav>li {
    float: left;
    z-index: 200;
}

.nav>li>a {
    display: inline-block;
}

.nav li ul {
    display: flex;
    position: absolute;
    left: -99999px;
    z-index: 100;
    width: 100%;
    /*height: 100%;*/
    padding-bottom: 0.5em;
    justify-content: left;
}

.nav li li a {
    display: block;
    /* display:inline-block; */
    /*background: #404040;*/
    /*position: relative;*/
    z-index: 99999;
    /*height: 100%;*/
    width: auto;
    /* width:100%; */
    color: #fff;
}

.nav li li li a {
    background: #404040;
    /*  z-index:200; */
    ;
}

.nav li {
    /*position: relative;*/
    ;
}

.nav>li.hover>ul,
.nav>li.hover>ul :active {
    left: 0;
    overflow: hidden;
}

.nav li li.hover ul {
    left: 100%;
    top: 0;
    overflow: hidden;
}

.arrow {
    display: none;
}

.sub {
    background: #304040;
    opacity: 0.9;
}

ul .sub {
    padding-top: 10px;
}

.menu-container-portal a:hover .nav li li li a {
    background: #ff0000;
}


/* Bestämma undermenyns storlek */

.sub2 {
    column-width: auto;
    text-align: left;
}

.test1 {
    display: inline-flex;
    margin-left: 22.5%;
}

.test1-show {
    display: block;
    margin-left: 22.5%;
    color: green !important;
}

jQuery:

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            /*$(".test1").addClass("active");
           $('.nav a').filter(function(){
              return this.href==location.href;}).parent()
           .addClass('active').siblings().removeClass('active');
           /*$(".nav > li > a").addClass("active");*/
            $(document).ready(function () {
                $('a(.active) a').hide();
                $('a(.active)').hover(
                    function () {
                        $('.test1').hide();
                    },
                    function () {
                        $('.test1').show();
                    });
            });
        }
    });
}

Hopefully that is all the code that is needed for you all to understand what I want and need some help with or some tips:) I think I got some of the jQuery code right I feel I am halfway there just the some little help :) thanks in advance :)

I was thinking about using one of these that I have found here:

http://jsfiddle.net/4G7TJ/1/

http://jsfiddle.net/MGkQC/7/

2019 - 01 - 21: An update to my own post: I have come closer to my goal after alot of frustrating moments. But there is still one problem left I need to hide the submenu when I am hovering over another link here is the code so far:

jQuery:

$(document).ready(function() {
$(".nav li [href]").each(function() {
    if (this.href == window.location.href) {
        $(this).css("background", "red");
       $(this).addClass("hover");
       $(this).parent().find('ul.sub').css("left","0");
    }
}); });

I was thinking about using .toggle somehow but cant really seem to get it working.