Keep dropdown visible while input boxes are focused - css

Question

My navbar has dropdown "fieldsets" for login and search like this:
<div class="nav-button" id="nav-box">
<a class="inside-link">
<span id="inside-text">Sign in</span>
</a>
<fieldset id="menu-box" class="menu-box">
<form method="post" id="forms" class="forms" action="checklogin.php">
<label for="username">Username or email</label>
<input type="text" id="username" name="username" value="" title="username" tabindex="4">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="" title="password" tabindex="5">
<input type="submit" id="small-btn" value="Sign in" tabindex="6">
<input type="checkbox" id="remember" name="remember_me" value="1" tabindex="7">
<label for="remember">Remember me</label>
<br />
Forgot your password?
<a id='forgot_username_link' title="If you remember your password, try logging in with your email" href="#">Forgot your username?</a>
</form>
</fieldset>
</div>
I have a fiddle here: http://jsfiddle.net/WBrns/5/
While input boxes like "search" "username" and "password" are focused, I'd like the associated dropdown to not disappear so users don't have to keep their mouse within the dropdown while typing.
Line 288 in the CSS was our first attempt which obviously doesn't work. My site already includes jQuery so any js/jquery solution is acceptable (since I think it's not possible with pure css)
Thanks!

Answer 1

On your hover style, make sure the attributes have the !important command and then use the code below while remembering to substitute the id's and classes to what you need:
$("input").focus(function () { that=this;
$(this).parent(".drop").css("display", "block");
$(this).blur(function() {
$(that).parent(".drop").css("display", "none");
});
})
You can take a look at an example here: http://jsfiddle.net/WBrns/12/
If a user begins to type, the drop down should not disappear even if they move their mouse away. However, if they click outside of the drop down, it will be hidden.

Answer 2

To improve upon Shaz's answer, you can name the blur event to prevent multiple blur events from being attached to the same input. I also recommend using a class name and CSS to show and hide the drop down so that you can take advantage of CSS transitions.
JS
$('input').focus(function () {
var $this = $(this);
var $drop = $this.parents('.drop');
$drop.addClass('open');
$this.bind('blur.closeDrop', function () {
$drop.removeClass('open');
$this.unbind('blur.closeDrop');
});
});
CSS
.drop {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.drop.open {
opacity: 1;
pointer-events: auto;
}