Horizontal Accordion for multilevel UL
<p>I've been looking at the plethora of horizontal accordion scripts on google.</p>

<p>for example:
<a href="http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/" rel="nofollow">http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/</a>
<a href="http://www.nyokiglitter.com/tutorials/horizontal.html" rel="nofollow">http://www.nyokiglitter.com/tutorials/horizontal.html</a>
<a href="http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/" rel="nofollow">http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/</a></p>

<p>All the scripts seem to be made for displaying content in a static width div/element.</p>

<p>I'm trying to make a fairly straight forward navigation menu.
When an element in the top-level UL is clicked, the bottom level UL "slides" out, if you click again if closes.  I guess I'd have to calculate the widths "dynamically"... not sure how to proceed.</p>

<p>An example would be this:</p>

<pre><code>    &lt;style type="text/css"&gt;
&lt;!--
ul.menu, ul.menu ul{ 
 list-style: none;
 display: inline;
 }
ul.menu li, ul.menu ul li {
 display: inline;
}

a, a:link, a:hover, a:visited, a:active {
 color: black;
 text-decoration: none;
}
--&gt;
&lt;/style&gt;


&lt;ul class="menu"&gt;
 &lt;li&gt;
  &lt;a href="#"&gt;Top-level 1&lt;/a&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;a href="#"&gt;Top-level 2&lt;/a&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="#"&gt;Bottom Level A1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Bottom Level A2&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Bottom Level A3&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Bottom Level A4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;a href="#"&gt;Top-level 3&lt;/a&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="#"&gt;Bottom Level B1&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;Bottom Level B2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;a href="#"&gt;Top-level 4&lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
