Как сделать так, чтобы меню не прыгало?

Здравствуйте. У меня возникла проблемка с меню: когда наводишь на какой-либо пункт меню, всё прыгает. Это ужасно раздражает. Подскажите, пожалуйста, как исправить эту проблему?

Заранее спасибо.

Код HTML:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>RealSite</title>
			<link rel="stylesheet" href="style.css">
			<link rel="stylesheet" href="fonts.css">
		</head>
		<body>
		
			<header>
				<div class="center-block-main">
					<div class="header-logo">
						<img src="Image/logo.png" alt="">
						<h2>Realestate Company</h2>
						<p>Lorem Ipsum is simply dummy text</p>
					</div>
					<div class="mobile">
						<p>Call us: (214) 227-7669</p>
					</div>
				</div>
				<div class="menu clearfix">
					<div class="menu-content center-block-main">
						<ul class="nav">
							<li><a href="#">Home</a></i>
							<li><a href="#">Our Story</a></i>
							<li><a href="#">Tenant</a></i>
							<li><a href="#">Owner</a></i>
							<li><a href="#">Contact us</a></i>
						</ul>
						<div class="login">
							<p><a class="login-p" href="#">Sign in</a> / <a class="login-p" href="#">Sign up</a></p>
						</div>
					</div>
				</div>
			</header>
		
		</body>
	</html>


Код CSS:

html,body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

/*Шапка сайта*/

header{
	background: linear-gradient(to right, #5f91b0, #4f85a8);
	height: 75%;
	margin-top: -16px;
}

.center-block-main{
	max-width: 1024px;
	margin: 0 auto;
}

.header-logo{
	float: left;
}

.header-logo img{
	margin-top: 15px;
}

.header-logo h2{
	font-family: 'Adobe Fangsong Std';
	color: #fff;
	margin-left: 30px;
	margin-top: -30px;
	font-size: 27px;
}

.header-logo p{
	font-family: 'Microsoft New Tai Lue';
	color: #fff;
	margin-left: 32px;
	font-size: 16px;
	margin-top: -20px;
}

.mobile{
	float: right;
}

.mobile p{
	color: #fff;
	font-family: 'Adobe Caslon Pro';
	font-size: 24px;
	margin-top: 55px;
}
	
/*---Шапка сайта----*/

/*МЕНЮ*/

.menu{
	background: linear-gradient(to right, #d9d9d9, #e2e2e2);
	overflow: hidden;
	clear: both;
    content: "";
    display: table;
	width: 100%;
}

/*.menu > ul{
	display: flex;
	overflow: hidden;
}*/

.nav{
	display: flex;
	float: left;
	list-style: none;
}

.menu a{
	padding-right: 50px;
	text-decoration: none;
	color: #3a5362;
}

.menu a:hover{
	color: #fff;
	background: linear-gradient(to right, #5288a9, #457a9c);
	padding: 20px 20px;
	 border: 1px solid transparent;
}

.login{
	float: right;
}
  • Вопрос задан
  • 95 просмотров
Решения вопроса 2
AskMy
@AskMy
иногда решаю задачки и задаю глупые вопросы
https://codepen.io/topicstarter/pen/zRRMqv?editors=0110 так вроде ... на hover не вещайте padding и border , из за этого прыгало всё
Ответ написан
UnluckySerivelha
@UnluckySerivelha
При наведении на пункт меню вы меняете паддинг, естественно оно будет прыгать.
.menu a:hover{
  color: #fff;
  background: linear-gradient(to right, #5288a9, #457a9c);
  padding: 20px 20px;
   border: 1px solid transparent;
}


https://codepen.io/anon/pen/jZZQVR
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Sveak Барнаул
от 40 000 руб.
18 авг. 2018, в 01:10
17000 руб./за проект
17 авг. 2018, в 23:00
5500 руб./за проект