Menu widget - prevent ui-state-active in all child menu items
I have a requirement where I need to highlight top level menu item and one child menu item representing current visiting page.
How to activate LINK1 top level item and SUBLINK2 child level item, leaving SUBLINK1 not activated?
If I add ui-state-active (html below) to "link1" all child menu items look like activated.
This is the current html:
<ul id="menu" class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" tabindex="0" aria-activedescendant="ui-id-1">
<li id="link1" class="ui-menu-item ui-state-active ui-corner-all" role="presentation"><a href="#" aria-haspopup="true" id="ui-id-1" class="ui-corner-all" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>LINK1</a>
<ul class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-expanded="false" style="display: none; top: 36px; left: 7px;" aria-hidden="true">
<li class="ui-menu-item" role="presentation"><a href="/Person" id="ui-id-4" class="ui-corner-all" tabindex="-1" role="menuitem">SUBLINK1</a></li>
<li class="ui-menu-item ui-state-active ui-corner-all" role="presentation"><a href="/Activity" id="ui-id-5" class="ui-corner-all" tabindex="-1" role="menuitem">SUBLINK2</a></li>
</ul>
</li>
</ul>