Keep dropdown visible while input boxes are focused

l.llknu

New Member
My navbar has dropdown "fieldsets" for login and search like this:\[code\]<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="http://stackoverflow.com/questions/15512287/Sign in" tabindex="6"> <input type="checkbox" id="remember" name="remember_me" value="http://stackoverflow.com/questions/15512287/1" tabindex="7"> <label for="remember">Remember me</label> <br /> <a href="http://stackoverflow.com/questions/15512287/#"id="resend_password_link">Forgot your password?</a> <a id='forgot_username_link' title="If you remember your password, try logging in with your email" href="http://stackoverflow.com/questions/15512287/#">Forgot your username?</a> </form> </fieldset> </div>\[/code\]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!
 
Back
Top