when using 2 dropdowns in nav.when i am clicking one of them and if i change my decision and go to another dropdown then the first opened drop down is not closing automatically when i m selecting the another dropdown.it looks not so cool
<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark bg-#37474f mdb-color darken-3 scrolling-navbar" [containerInside]="true">
<logo>
<aclass="logo navbar-brand"href="#"><strong>Navbar</strong></a>
</logo>
<links>
<ulclass="navbar-nav mr-auto">
<lirouterLink=""class="nav-item active waves-light"mdbRippleRadius>
<aclass="nav-link">Home <spanclass="sr-only">(current)</span></a>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Academic
</a>
<divclass="dropdown-menu dropdown-primary dropdown-menu-right"role="menu">
<arouterLink="university"class="dropdown-item">
University
</a>
<aclass="dropdown-item">
principal
</a>
<aclass="dropdown-item">
Faculty
</a>
<aclass="dropdown-item">
Students
</a>
<aclass="dropdown-item">
Non Teaching Staff
</a>
<aclass="dropdown-item">
College Staff
</a>
</div>
</li>
<liclass="nav-item dropdown"dropdown>
<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>Hospital</a>
<divclass="dropdown-menu dropdown-default dropdown-menu-right"role="menu">
<aclass="dropdown-item ">hoospital Staff</a>
<aclass="dropdown-item "> Departments</a>
</div>
</li>
<lirouterLink="pearl-times"class="nav-item waves-light"mdbRippleRadius>
<aclass="nav-link">Pearl times</a>
</li>
<lirouterLink="about"class="nav-item waves-light"mdbRippleRadius>
<aclass="nav-link">About</a>
</li>
<lirouterLink="contact"class="nav-item waves-light"mdbRippleRadius>
<aclass="nav-link">Contact</a>
</li>
<liclass="nav-item waves-light"mdbRippleRadius>
<aclass="nav-link">Opinions</a>
</li>
<liclass="nav-item dropdown btn-group"dropdown>
<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>
Dropdown
</a>
<divclass="dropdown-menu dropdown-primary dropdown-menu-right"role="menu">
<aclass="dropdown-item"href="#">Action</a>
<aclass="dropdown-item"href="#">Another action</a>
<aclass="dropdown-item"href="#">Something else here</a>
</div>
</li>
</ul>
<ulclass="navbar-nav nav-flex-icons">
<liclass="nav-item waves-light"mdbRippleRadius>
<aclass="nav-link"><iclass="fa fa-facebook"></i></a>
</li>
<liclass="nav-item waves-light"mdbRippleRadius>
<aclass="nav-link"><iclass="fa fa-twitter"></i></a>
</li>
<liclass="nav-item waves-light"mdbRippleRadius>
<aclass="nav-link"><iclass="fa fa-instagram"></i></a>
</li>
</ul>
</links>
</mdb-navbar>
<div class="jumbotron jumbotron-fluid">
<divclass="container">
<h1class="h1-reponsive mb-4 mt-2 blue-text font-bold">Fluid jumbotron</h1>
<pclass="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
