jQuery Forum

1. <div class=ui-widget" id="bar">
2.       <div class="ui-widget-header" id="menu">
3.             <ul>
4.                   <li>
5.                         <a href="/index.php">Home</a>
6.                   </li>
7.                   <li>
8.                         <span class="submenu">Your Account</span>
9.                         <div class="container ui-widget-content ui-corner-bottom">
10.                               <dl class="ui-widget">
11.                                     <dd>
12.                                           <a id="item_1" href="/profile.php">Your Profile</a>
13.                                     </dd>
14.                                     <dd>
15.                                           <a id="item_2" href="/password.php">Change Your Password</a>
16.                                     </dd>
17.                               </dl>
18.                         </div>
19.                   </li>
20.             </ul>
21.       </div>
22. </div>

Run $('#item_N').button(); on all the menu items where "item_N" is the actual item id like item_1, item_2, and so on...  the above demonstrates a menu bar with 2 top level items, one clickable (Home) and for the other one (Your Account) when you mouse over it will produce a drop down with 2 items in it.  You can use the <dt> instead of <dd> tag to have non-clickable menu items in the drop down for whatever reason.

And voila... you've got a simple themeable drop down menu bar.  Not very pretty, but it works and should hold you over until 1.9 comes out!

I hope this helps someone.  Apologies for any error in the code - I typed it directly into this post.