Почему форма сдвигает шапку сайта?

Question

[codymaverick]

При ховере ссылки на личный кабинет появляется форма входа.

Если вводить текст в input форма поднимает контент шапки сайта. Почему так происходит?

<div class="login" title="Личный кабинет">
            <img src="img/login.png" alt="">
            <div class="login-two">
              <form class="authorization">
                <input class="authorize" placeholder="Почта" type="text" name="mail">
                <input class="authorize" placeholder="Пароль" type="password" name="password">
                <button type="submit">Войти</button>
              </form>
            </div>

login{
	display: inline-block;
	width:100px;
	height: 91px;
	margin-left: 33px;
	border-left: 1px solid #232323;
	border-right: 1px solid #232323;
	float: left;
}

.login img{
	padding-left: 25px;
	padding-top: 22px;
}
.login:hover .login-two{
	display: block;
}

.login-two{
	width: 310px;
    height: 274px;
    background: #fff;
    z-index: 10000;
    position: absolute;
    top: 91px;
    display: none;
}

.authorization{
	display: block;
	padding-left: 24px;
	padding-top: 10px;
}

.authorize{
	display: block;
	height: 33px;
    width: 154px;
    padding-left: 11px;
    border: 1px solid #eee;
    outline: none;
    margin-top: 1px;
    background: #fff;
   	font-family: 'Stem-Regular';
}

Answer 1

[Yeldos Adetbekov]

Делать это ховером не есть хорошо так еще и наведение на див.
Лучше делать это жаваскриптом и поделить кнопку от формы входа.
Потом из за этого у вас .login расширяется на 100%.

Answer 2

[Избасхан Кабилгаков]

Скинь ссылку на сайт