Highlighting parent li in nested navigation

I'm using perch_pages_navigation to generate my website's nested navigation from 2 template files, item.html and subitem.html.

perch_pages_navigation(array(
    'template' => array('item.html', 'subitem.html')
));

I need the parent li to have a class of active when on a submenu item page (also class='active') - see below. Here is the required html output.

<ul class="menu">
        <li><a href="welcome/">Welcome</a></li>
        <li class="active"><a href="about/">About</a>
            <ul class="sub-menu">
                <li class="active"><a href="history/">History</a></li>
                <li><a href="map/">Map</a></li>
            </ul>
        </li>
  </ul>

Only the active sub-menu is displaying class active. Does anyone know of a way to set the parent li class also?

This is my item.html file contents for first level navigation.

<perch:before><ul class="menu"></perch:before>
<li <perch:if exists="current_page"> class="active"</perch:if>><a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
<perch:pages id="subitems" encode="false" />
</li>
<perch:after></ul></perch:after>

This is the subitem.html file contents for sub menu navigation.

<perch:before><ul class="sub-menu"></perch:before>
<li <perch:if exists="current_page"> class="active"</perch:if>><a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
</li>
<perch:after></ul></perch:after>

Many thanks