How does the Search Menu option on THIS forum work?

[admin]

I was looking for a menu type thing which will look like normal text. Until you click on it and it gives a small popup div with a form.
Exactly like the search option at the top of every page here.

I looked in the source, but the code that's used here is a lot different from the codes using visibility: hidden etc...

I noticed that they have this:
<td id="navbar_search" class="vbmenu_control"><a href=http://www.webdeveloper.com/forum/archive/index.php/"search.php?" accesskey="4">Search</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></td>

...
...

<!-- header quick search form -->
<div class="vbmenu_popup" id="navbar_search_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>

<td class="thead">Search Forums</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<form action="search.php" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="text" class="bginput" name="query" size="20" /><!-- go button -->

<input type="submit" class="button" value="Go" /><br />
</form>
</td>
</tr>
<tr>
<td class="vbmenu_option"><a href=http://www.webdeveloper.com/forum/archive/index.php/"search.php?" accesskey="4">Advanced Search</a></td>
</tr>
</table>
</div>

<!-- / header quick search form -->
and they use this css:
.vbmenu_control
{
background-color: #660000;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background-color: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
color: #000000;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite
{
background-color: #8A949E;
color: #FFFFFF;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:visited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active
{
color: #FFFFFF;
text-decoration: none;
}


Could someone try to explain how it works?
And does it require javascript? or is that just there for the [v] button?
(How to make the popup 'popup' and not take any space in the page itself...
My attempted code (which sucks) does make the popup 'popup' [sometimes], but always 'reserves' that space in my page )
I was using the <a><span>PopupForm bla bla</span>Login</a> style popup...

Thanks a lot!I'd guess that it works by putting the box absolutely positioned into position, then changing the css property display: none; to be display: block; on mouseover. That would be done with javascript.Ok thanks, I thought it worked like that, but wasn't sure what the javascript there was for... Now I know