Hover over Login Option

I would like the “login” button in the nav bar to show a login form when hovered over (like this: https://www.gandyprinters.com). I don’t know how to do this in WordPress. I made a custom nav bar, but I’m not sure where to put the code to make it work. Also, this is the code I am using; is it correct and where should I put it?

Code for the Pop-up login:

<div id="login">
     <form method=post action="https://host.onlineprintsolutions.com/gandyprinters/login.asp">

     <input class="field" onfocus="if(this.value == 'Username'){this.value = '';}" type="text" onblur="if(this.value == ''){this.value='Username';}" id="name" value="Username" /><br/>
     <input class="field" onfocus="if(this.value == 'Password'){this.value = '';this.type='password';this.value=''}" type="text" onblur="if(this.value == ''){this.type='text';this.value='Password';}" id="name" value="Password" />

     <input class="clsSubmit" type=submit value="sign in" id=submit1 name=submit1 onClick="if ((user.value=='') && (password.value=='')){alert('Please enter your user name & password');return false}">

     </form>
</div>

Javascript to make it work:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/anylinkcssmenu.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                var src;
                $('.xxxbtnLink').hover(function(){
                    src = $(this).children('.btnShop').attr('src');
                    src = src.replace('.png', '-over.png');
                    $(this).children('.btnShop').attr('src',src);
                },function(){
                    src = $(this).children('.btnShop').attr('src');
                    src = src.replace('-over.png', '.png');
                    $(this).children('.btnShop').attr('src',src);
                });

                $('#login').click(function(){
                   $('#loginPop').slideToggle(0);
                   return false;
                });

            });
        </script>