Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code:
<ul class="nav nav-second-level">
<li id="BooksRegistration">
<a href="BooksRegistration.php"><i class="fa fa-edit"></i> Books Registration </a>
</li>
<li id="AuthorRegistration">
<a href="AuthorRegistration.php"><i class="glyphicon glyphicon-user"></i> Author Registration </a>
</li>
<li id="MembersRegistration">
<a href="MembersRegistration.php"><i class="glyphicon glyphicon-user"></i> Members Registration </a>
</li>
<li>
<a href="#">Second Level Link<span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
I am looking for a solution to keep the dropdown list expanded when one of the nested pages in the list is loaded. I specifically need a Javascript code solution since jQuery is not an option for me.