Cufon Styling for main navigation

Question

In this website: http://theoew.uuuq.com/portfolios/Idea/ I use Cufon to style the text for the the main navigation. I have use this html code for it.

<ul id="mainnav" class="alignright">
    <li class="active">
     <a href="#">
      <span>Home</span>
      <small class="active">main page</small>
     </a>
    </li>
    <li>
     <a href="#">
      <span>About</span>
      <small class="active">my bio</small>
     </a>
    </li>
</ul>

I have one problem with it however. When I hover over the #mainnav li span and then immediately move the mouse down so its hovering over the #mainnav li small text beneath it the #mainnav li span thinks the mouse is still on top of it and stays in its hover state. This does not happen when I don't hover over the #mainnav li small after hovering over the #mainnav li span.

I'm using this code with Cufon:

Cufon.replace('#mainnav li a span', {
    hover: true,
    hoverables: { span: true, small: true }
});

Its really essential that I get this fixed so I would really appreciate any help.

Note: The site is by no means finished.

Answer 1

hey. I did not runt the code but you could try to add the small tag into you cufon replace .....

<script type="text/javascript"> 
      $(document).ready(function() {  
       Cufon.replace('h1, #mainnav li a span, #mainnav li a small', {
        hover: true,
        hoverables: { span: true, small: true }

       });
      });
     </script>