Automatic menu for a UL tag?

Is there a way to use jQuery to automatically apply a vertical accordion menu (or some other vertical menu type) to a UL tag? So, something like this could become a menu via a JavaScript call:

<ul>
  <li>Item 1</li>
  <li&开发者_开发问答gt;Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

In other words, its LI children would become menu items. It would be great if the menu's height could be constrained. Thanks.

shown here on this FIDDLE :-D

js:

$('.menu .menu-item').hover(function(){$(this).children('ul').toggle('blind')})
    $('.menu .menu-item ul').hide()

html:

<ul class='menu'>
    <li class='menu-item'> ITEM
       <ul class='sub-menu'>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
         <li>Item 4</li>
       </ul>
    </li>
</ul>

you don't even need Javascript(*). use suckerfish: http://htmldog.com/articles/suckerfish/dropdowns/

(* I think only for an unsupported event in IE6)

There are a ton of plugins for this.

Superfish is built off of the Suckerfish (css-only) menus, but adds a bit of javascript to handle some of the yucky quirks of a css-only solution.

There's a new menu class in jQuery UI's github repository that will be in jQuery UI 1.9 that should satisfy your needs.

It's compatible with jQuery UI 1.8, and ThemeRoller too.

It handles nested sub-menus. I've used it on a project recently and it's pretty good.

I actually use AllWebMenus Pro (Likno Software) to make vertical menus and I'm quite contented.I think it will work for you.