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!

Recommended Answers

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
Jump to Post

All 3 Replies

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

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.

.myClass:hover  + .hide_img3
{
    display:block
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.