[web] Basic javascript for a list-based menu

I haven't done any web programming in the last 10 years or so, so forgive me if this is question is simple or misguided. I have a div, that contains a set of nested, unordered lists. The div has a CSS class which styles the lists like a basic menu: the top-level list is rendered inline, all other lists are rendered block, it should look like your application menu. I've tried writing a script to do this, and it works somewhat, but I have a feeling there are better ways that I'm not aware of. So, I figured I'd ask, and rely on the experience of others. Here's what I need. -I'd like to change the lists without having to change the script, and add new items to the list without having to remember to add event handlers. (Don't know how to do this, right now I handle the mouseover/mouseout events directly in the HTML). -Whenever the user hovers over a

that contains a

, the
should be displayed (did this by manipulating the element's style attribute). -Whenever the user leaves the
• , the displayed
  should be hidden again, unless the user leaves to hover over the
  or it's decendants... i.e. if the user leaves the
  • but is in a nested menu three levels down, all menus should remain visible (No idea how to get this working... though IE6 seems to keep the sub-menu open while the mouse is over it, FF hides it when I leave the owner
  • ). -Must work on the usual suspects: IE5.5/6, Gecko-based, Opera, etc. All I need are some starting points for the above, I'll be happy to do the hard work myself, but I really don't know where to start since the last time I touched this stuff.