Textfield in hover is not working properly in IE

Question

I'm having trouble with developing in IE, I've made a great header, but now I was checking everything in Internet Explorer and I've found a few bugs,

One is the following, I've never had something like this, that's why I'm really obsessed with this problem. I'm not even sure if anyone knows how to fix this, accept the challenge!

I know placeholder DOESNT work in IE, but that's obviously not the problem. If you are in the hover, and you're going over the text field, the box disappears, and you need to go over it again.

Here some code:

<ul>
    <div class="transparant">
        <div class="dropbox">
            <div class="login">
                <div class="textfield">
                     <form method="post">
                       <input id="textfield_post" type="text" name="username" placeholder="Gebruikersnaam" class="matrix"/>    
                </div>
            </div>

            <div class="pass">
                <div class="textfield">
                    <input id="textfield_post" type="password" name="password" placeholder="Wachtwoord" class="matrix"/>   
                </div>
            </div>

            <div class="loginbutton">   
                <input type="submit" class="btn" value= "Login" type="button" id="login_button"></form>
            </div>

            <div class="forgotpass">
                <a href="#" onclick="NewPassword()">Forgot password?</A>
            </div>
        </div>
    </div>
    </div>
</ul>

I think it is because of the z-index. Also, I don't want to use jquery or anything, I just want to fix the problem using right HTML & CSS.

I'm asking you if anyone is familiar with this problem,

The website: (it is only at IE 7&8)

Thanks for reading;)

Answer 1

When you empty the textboxes the problem is solved. I don't know if you accept that work around but hey, it works :)

Answer 2

I guess you used :hover CSS or mouseover() JQuery to make the box appears. I suggest to use mouseentered() check the following link:

http://www.mkyong.com/jquery/different-between-mouseover-and-mouseenter-in-jquery/

and to be sure make the ul overflow:hidden