How to make Twitter Bootstrap (Bootstap 4 beta) menu dropdown on hover rather than click : How to make Twitter Bootstrap (Bootstap 4 beta) menu dropdown on hover rather than click
here is my code 
PS: I need in an example a hover on a submenu dropdown

    <!-- Header -->

<div>
  <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-light justify-content-end" >

    <div class="{{config.containerType}}">
      <button
        class="navbar-toggler navbar-toggler-right btn"
        type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation" (click)="toggleCollapsed()">
        <span class="navbar-toggler-icon"></span>
      </button>
       <!--Logo-->
      <a *ngIf="config.logo" routerLink="{{config.logo.routerLink}}" class="navbar-brand">
        <img src="{{config.logo.src}}" alt="Image Description" class="img-fluid img-res" >
      </a>
       <!--End Logo-->
      <div id="navbarSupportedContent"  [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
        <ul *ngIf="config.menu.content" class="navbar-nav text-uppercase" >


          <li *ngFor="let item of config.menu.content" class="menu-item dropdown  ">
            <a >
                  <span dropdown (onShown)="onShown()"
                        (onHidden)="onHidden()"
                        (isOpenChange)="isOpenChange()">
  <a *ngIf="item.routerLink" href dropdownToggle (click)="false" [ngStyle]="item.style" routerLink="{{item.routerLink}}" routerLinkActive="menu-item-active ; selectSlider(item)">{{item.name}}</a>
      <a *ngIf="!item.routerLink" href dropdownToggle (click)="false" [ngStyle]="item.style">{{item.name}}</a>
                    <div *ngIf="item.submenu">
                            <ul *dropdownMenu class="dropdown-menu">
                              <li *ngFor="let choice of item.submenu">
                                <a [ngStyle]="choice.style" class="dropdown-item" routerLink="{{choice.routerLink}}">{{choice.name}}</a>
                              </li>
                            </ul>
                      </div>
                  </span>
            </a>

          </li>

        </ul>


      </div>

    </div>

  </nav>

</div>


<!-- End Header -->
