[jQuery] sub-menu for a particular top-level link stays open until the user clicks on another top-level link

[jQuery] sub-menu for a particular top-level link stays open until the user clicks on another top-level link


Total noob here:
I have an <ul> based navigation system with 3 top level links;
The first and third links go to pages, while the second link displays
a sub-menu of 3 links
when you mouse-over it.
My question is very simple: how do I make this sub-menu (hidden in
its' initial state) display and remain open until the user clicks on
one of the other top-level links? My guess is that it's set to
display:none initially, but that on mouseOver or clicking on the
appropriate top level link that adds a new class to the sub-menu <ul>
which is set to display:block. When another top-level link is clicked
that class is removed from the sub-menu <ul>.
Any help much appreciated.
Here is an example of the HTML:
<ul >
<li><a href="#">linkText 1</a></li>
<li><a href="#">linkText 2</a>
<ul>
<li><a href="webpage.html">linkText 2a</a></li>
<li><a href="webpage.html">linkText 2b</a></li>
<li><a href="webpage.html">linkText 2c</a></li>
</ul>
</li>
<li><a href="webpage.html">linkText 3</a></li>
</ul>