How to keep CSS dropdown menu from disappearing

I created a CSS dropdown menu. I was wondering if there is a way for the menu to stay visible even after the mouse leaves the a:hover area?

Here’s my page, just hover over the ‘Home’ tab: [url]http://www.mikeglaz.com/vcc/[/url]

Here’s my HTML:

[CODE]
<ul id=”menu”>
<li class=”selected” id=”home”><a href=”index.php”>Home</a>
<ul>
<li><a href=”#”>Products</a>
<ul class=”inner”>
<li><a href=”#”>Test1</a></li>
<li><a href=”#”>Test2</a></li>
</ul>
</li>
<li><a href=”#”>About</a>
<ul class=”inner”>
<li><a href=”#”>Test3</a></li>
<li><a href=”#”>Test4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”join.php”>Join</a>
<ul>
<li><a href=”#”>Products</a>
<ul class=”inner”>
<li><a href=”#”>Test1</a></li>
<li><a href=”#”>Test2</a></li>
</ul>
</li>
<li><a href=”#”>About</a>
<ul class=”inner”>
<li><a href=”#”>Test3</a></li>
<li><a href=”#”>Test4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”calendarPage.php”>Calendar</a></li>
</ul>
[/CODE]

and here’s my CSS:

[CODE]
#menu ul{
list-style:none;
text-align: center;
width:50px;
position:relative;
display: block;
float:left;
}
#menu li ul li, #menu li.selected ul li{
float: left;
position:relative;
display: block;
padding: 0;
list-style: none;
margin: 1px 0 0 0;
background: #800;
font-size:18px;
line-height:22px;
}

#menu li ul li a, #menu li.selected ul li a{
float: left;
font: normal .80em arial, sans-serif;
height: 21px;
display: block;
_position: relative;
padding: 9px 29px 4px 20px;
text-align:center;
width: 50px;
color:#fff;
background:#800;
text-decoration:none;
}

#menu li ul li a:hover{
color:#fff;
background: #4d4d4f;
}

#menu ul {
list-style:none;
_position:absolute;
_left:-9999px;
display: none;
}

#menu li ul li .inner{
list-style: none;
position: absolute;
left: -9999px;
}

#menu ul a{
white-space:nowrap;
}

#menu li:hover ul{
position: absolute;
_left: 0px;
top: 216px;
display: block;
}

#menu li:hover ul li:hover .inner{
position:absolute;
left:100px;
top: 0px;
z-index: 1;
}

#menu ul
{
margin: 1px 0 0 -10px;
}

#menu ul li ul li
{
margin: 1px 0 0 0;
}

#menu ul li ul
{
margin: -1px 0 0 0;
}

#menu li ul li:hover, #menu li ul a:hover, #menu li.selected ul li:hover, #menu li.selected ul a:hover
{
background: #4d4d4f;
}
[/CODE]

Also in #CSS _↴