Submenu stay focus on page change angular 2

Question

UPDATE #1

After long research I've achieve what I was looking for (posting in an answer the solution #1), now I want to implement *ngFor with the same logic but now when I click on a main menu both menus gets open (each submenu work as desired), what it's needed is when perform click on Menu1 'SubMenu 1' shows and 'SubMenu 2' stay hide and viceversa when perform click on Menu2 'SubMenu 2' shows and 'SubMenu 1' hide.

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" (click)="onSelectMetrics()" *ngFor="let menu of entities"><a href='javascript:void(0)'>{{menu.entity_id}}</a>
            <ul class="dropdown-content" [hidden]="IsHiddenMetrics">
                <li (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_id}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

onSelectExtractor(){
        if(this.IsHiddenExtractor == true){
            this.IsHiddenExtractor= !this.IsHiddenExtractor;
        }
        this.IsHiddenMetrics=true;
    }

    onSelectMetrics(){
        if(this.IsHiddenMetrics == true){
            this.IsHiddenMetrics= !this.IsHiddenMetrics;
        }
        this.IsHiddenExtractor=true;
    }

    onClickSubmenu(value_id: number){
        if(value_id == 2){
            this.router.navigate(['/pages1.html'], { skipLocationChange: true});
        } else{
            this.router.navigate(['/pages2.html'], { skipLocationChange: true});
        }
    }

    onClickHome(){
        this.IsHiddenMetrics= true;
        this.IsHiddenExtractor= true;
        this.router.navigate(['/welcome.html'], { skipLocationChange: true});
    }

---

ORIGINAL

It is possible to leave the submenu open on main menu hover and after hover close it unless hovering a submenu (without click preferably) and let the submenu focus after click on it and after the page change or redirec to another page?

I've the following code and Im using Angular 2;

<nav class="navigation">
    <ul class="mainmenu">
        <li>
            <a>Main Menu 1</a>
            <ul class="submenu">
                <li><a href='toPage2'>SubMenu 1</a></li>
            </ul>
        </li>
        <li><a>Main Menu 2</a>
            <ul class="submenu">
                <li><a href='toPage3'>SubMenu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

.navigation {
  width: 220px;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.mainmenu a {
  display: block;
  background-color: #3E4A5B;
  text-decoration: none;
  padding: 8px;
  color: #FFFFFF;
}
.mainmenu a:hover {
    background-color: #647484;
}
.mainmenu a:active {
   background-color: #EDEEF0;
  color: #151921;
    border-left:solid 4px #3E4A5B;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 220px;
}
.submenu a {
  background-color: #647484;
    text-indent: 20px;
}
.submenu a:hover {
  background-color: #EDEEF0 !important;
  color: #151921;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

Answer 1

Solution #1

HTML

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" (click)="onSelectMetrics()"><a>{{menuUsabilitymenu}}</a>
            <ul class="dropdown-content" [hidden]="IsHiddenMetrics">
                <li (click)="onClickSubmenuUsability()"><a href='javascript:void(0)'>{{menuUsabilitysubmenu}}</a></li>
            </ul>
        </li>
        <li [class]="hideExtractor" (click)="onSelectExtractor()"><a>{{menuExtractormenu}}</a>
            <ul class="dropdown-content" [hidden]="IsHiddenExtractor">
                <li (click)="onClickSubmenuExtractor()"><a href='javascript:void(0)'>{{menuExtractorsubmenu}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

Angular 2

onSelectExtractor(){
        if(this.IsHiddenExtractor == true){
            this.IsHiddenExtractor= !this.IsHiddenExtractor;
        }
        this.IsHiddenMetrics=true;
    }

    onSelectMetrics(){
        if(this.IsHiddenMetrics == true){
            this.IsHiddenMetrics= !this.IsHiddenMetrics;
        }
        this.IsHiddenExtractor=true;
    }

    onClickSubmenuUsability(){
        this.router.navigate(['/pages/metrics.html'], { skipLocationChange: true});
    }

    onClickSubmenuExtractor(){
        this.router.navigate(['/pages/extractor.html'], { skipLocationChange: true});
    }

    onClickHome(){
        this.IsHiddenMetrics= true;
        this.IsHiddenExtractor= true;
        this.router.navigate(['/pages/welcome.html'], { skipLocationChange: true});
    }

CSS

.navigation {
  width: 220px;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.mainmenu a {
  display: block;
  background-color: #3E4A5B;
  text-decoration: none;
  padding: 8px;
  color: #FFFFFF;
}
.mainmenu a:hover {
    background-color: #647484;
}
.mainmenu a:active {
   background-color: #EDEEF0;
  color: #151921;
    border-left:solid 4px #3E4A5B;
}
.mainmenu li:hover .dropdown-content {
  display: block;
  max-height: 220px;
}
.submenu a {
  background-color: #647484;
    text-indent: 20px;
}
.submenu a:hover {
  background-color: #EDEEF0 !important;
  color: #151921;
}
.dropdown-content a:focus{
    background-color: #C8E0F6 !important;
    color: #151921;
}
.submenu a:focus {
  background-color: red !important;
  color: #151921;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}