title: Cufon Styling for main navigation
body: <p>In this website:
  <a href="http://theoew.uuuq.com/portfolios/Idea/" rel="nofollow noreferrer">http://theoew.uuuq.com/portfolios/Idea/</a>
  I use Cufon to style the text for the the main navigation. I have use this html code for it.</p>
  
  <pre><code>&lt;ul id="mainnav" class="alignright"&gt;
      &lt;li class="active"&gt;
          &lt;a href="#"&gt;
              &lt;span&gt;Home&lt;/span&gt;
              &lt;small class="active"&gt;main page&lt;/small&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;span&gt;About&lt;/span&gt;
              &lt;small class="active"&gt;my bio&lt;/small&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>I'm using this code with Cufon:</p>
  
  <pre><code>Cufon.replace('#mainnav li a span', {
      hover: true,
      hoverables: { span: true, small: true }
  });
  </code></pre>
  
  <p>Its really essential that I get this fixed so I would really appreciate any help.</p>
  
  <p>Note: The site is by no means finished. </p>