Let's say you have a menu bar structured as follows:
<nav>
<ul class="nav">
<li class="menu1"><a href="#">Menu Item 1</a></li>
<li class="menu2"><a href="#">Menu Item 2</a>
<ul>
<li class="menu2.1"><a href="#">Menu Item 2.1</a></li>
<li class="subMenu2"><a href="#">Menu Sub-Menu Item 2</a>
<ul>
<li class="subMenu2.1"><a href="#">Menu Sub-Menu Item 2.1</a></li>
<li class="subMenu2.2"><a href="#">Menu Sub-Menu Item 2.2</a></li>
<li class="subMenu2.3"><a href="#">Menu Sub-Menu Item 2.3</a></li>
<li class="subMenu2.4"><a href="#">Menu Sub-Menu Item 2.4</a></li>
</ul>
</li>
<li class="menu2.2"><a href="#">Menu Item 2.2</a></li>
<li class="menu2.3"><a href="#">Menu Item 2.3</li>
</ul>
</li>
</ul>
</nav>
If the specified class name subMenu2.2 is given, how would you expand this sub menu and its parent menu to display their contents externally without clicking on the menu bar itself?
For example, if subMenu2.2 needs to be viewed, then all the items in the menu2 section of the menu bar would be shown or activated for visibility.
Typically, you would navigate through the menu items and hover over them to display certain sub menus. My objective is to reveal the submenu or parent menu based on the provided class name without manual interaction.