To get a horizontal nav bar with vertical dropdowns, use a combination of a table and unordered lists.
The level 1 items are represented by table cells, subsequent levels are represented by unordered lists.
The positioning of the child menus was a problem. The default is to have them appear directly alongside, but when on a top level item, that was obscuring the subsequent items in the horizontal nav bar. Having them appear below was ok for a single dropdown menu, but if there was a second level beneath, then that 2nd level would obscure the rest of the first. The solution is to have the menu open below and somewhat to the right, see the "position" option in the menu invocation.
<style type="text/css">
#trJMenu td { white-space: nowrap; width: auto; }
#trJMenu li { white-space: nowrap; width: auto; }
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#trJMenu").menu( { position: { my: "left top", at: "center bottom" } } );
});
</script>
<table>
<tr id='trJMenu'>
<td>
<a href='#'>Timesheets</a>
<ul>
<li><a href='#'>Labour</a></li>
<li><a href='#'>Chargeout Report</a></li>
</ul>
</td>
<td>
<a href='#'>Activity Management</a>
<ul>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Proposals</a></li>
</ul>
</td>
</tr>
</table>