hover menu

hover menu

Hi all,

I have a navigation menu with some subnavigation, the classical kinda thing, a list within a list. The nested list is being hidden in CSS and the trick is to hover the list item which holds the nested list to make it expand.

  1. <ul>
  2. <li><span><a href="/site/company/" title="Company">Company</a></span>
  3.     <ul>
  4.     <li><a href="/site/company/corporate-info/" title="Corporate info">&gt; Corporate info</a></li>
  5.     <li><a href="/site/company/management/" title="Management">&gt; Management</a></li>
  6.     <li><a href="/site/company/investor-info/" title="Investor info">&gt; Investor info</a></li>
  7.     </ul>
  8. </li>
  9. </ul>
Notice the <span> around the anchor, I use this for some additional styling. What I'd like to see happen is jquery adding a listener to the span, so that if you mouseover it, the initially hidden nested list will expand. When you leave the span I want nothing to happen because the menu should only collapse when you leave the list item that holds the hidden list.

Simple, nothing new, so I started coding this and it works terribly. I'd like to start over from scratch, anyone who can help me with this?