CSS Hover Button with login form

[patk570]

Hello everyone,

Have a code that works well but I need it to open to the right on hover. Right now its going below the element and making my page look bad. Here is the code i have:

<style type="text/css">
.hide_img3 {
    display: none;
}
.hide_img3 {
    background: none repeat scroll 0 0 #333;
    border: 1px solid #000000;
    border-radius: 4px 4px 4px 4px;
    color: #78C102;
    height: 85px;
                display: none;
                position: relative;
    margin-left: 12px;
    margin-top: 0px;
    width: 145px;
}
.myClass:hover  .hide_img3
{
    display:block

}
</style>

<div class="myClass">
    <div>
                <a class="show_img3" href="#"><span>Login</span></a><div class="hide_img3">
                <form action="" method="post" name="login">
                <input style="border-radius: 4px 4px 4px 4px;" type="text" placeholder="Username" />
                <br />
                <input style="border-radius: 4px 4px 4px 4px;" type="password" name="password" placeholder="Password" />
                <br />
                <input style="float:right" type="submit" value="Login" name="login" />
                </form>
    </div>
</div

I need for it to open to the right and not under it.
Thanks in advance!

[JorgeM]

If you want to position it up and to the right, you could further modify the margin properties. However, this all depends on what else you have planned for this page.

For example...

 margin-left: 50px;
 margin-top: -15px

[patk570]

I am currently working on this: http://patrickspcrepair.com/newportal/newtheme/index.php .If you have time to look, It would be greatly appreciated! If you open the menu in the top left and where the login link is, is where i want it to show to the right.

[sudhir869939]

.myClass:hover  + .hide_img3
{
    display:block
}