Html – sIFR in main menu

Is this menu:

<div class="navigation">
  <ul id="nav-menu">
    <li class="active">
      <div class="sifr-r active"><a href="#" title="home" class="top-link"><span class="blue-small">01.</span><br />HOME</a></div>
      <div class="blue-line"></div>
    </li>
    <li>
      <div class="sifr-r"><a href="#" title="property management" class="top-link"><span class="blue-small">02.</span><br />PROPERTY<br />MANAGEMENT</a></div>
      <div class="blue-line"></div>
      <ul>
        <li><a href="#" title="Rental returns">Rental returns</a></li>
        <li class="last"><a href="#" title="Resources">Resources</a></li>
      </ul>
    </li>
</ul>

and sIFR:

sIFR.replace(conduititc_light, {
  selector: '.sifr-r',
  css: [
    'a {color: #3c4a4b; text-decoration: none; margin-left: 4}',
    'a .blue-small {color: #00bbd6; font-size: 8}',
    'a:hover {color: #ffffff}',
    'a:hover .blue-small {color: #00bbd6}',
    'a.hover {color: #ffffff}'
  ],
  wmode: 'transparent'
});

How save hover effect in sIFR while mouse point on li? Whithout sIFR it has been made with js (mootools):

var nav = $('nav-menu');
nav.getElements('.sifr-r').each(function(item) {
  item.getParent().addEvents({
    'mouseover': function() {
      if (!item.getParent().hasClass('hover')) {
        item.getParent().addClass('hover');
      }
    },
    'mouseout': function() {
      if (item.getParent().hasClass('hover')) {
        item.removeClass('hover');
      }
    }
  });
});

and CSS:

.navigation ul li.hover a.top-link {color: white}