При наведении на выпадающее меню, страница удлиняется, как исправить?

Question

TSIMTheFuhrer @TSIMTheFuhrer

Вёрстка

При наведении на выпадающее меню, страница удлиняется, как исправить?

Сделал выпадающее меню , однако оно длинное , потому вместе с собой залезает за края сайта , как сделать , чтобы оно было одной длины или чтобы длина сайта увеличивалась пропорционально меню при наведении ?

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<base target="_blank">
		<meta charset="UTF-8">
			<meta name="description" content="Магазин постельного белья и принадлежностей . Мы рады видеть Вас по адресу : г.Ступино, ул. Проспект Победы, д.63/24, торговый центр КБО, второй этаж, павильон 203">
				<title>Заказ</title>
			<link rel="stylesheet" type="text/css" href="css/main2.css">
		<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
	<div id="wrap">
		<header>
			<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
				<div class="logo">
					<span class="top-left"> <a href="https://vk.com/korolevanochist"> <img src="img/VK.png" alt="Группа ВК" title="Группа ВК"> </a> </span>
						<a href="Order.html" target="_self" title="Страница заказа" > Заказ </a>
				</div>
					<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
						<a href="About.html" target="_self" title="Полезная информация о нашем магазине" class="top-right"> О нас </a>
						<a href="Main.html" target="_self" title="Главная страница магазина" class="top-right"> Королева Ночи </a>
		</header>
			<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
				<div class="all">
						<nav class="menu">
								<ul>
									<li> <a href="#"> Простыни </a></li>
									<li><a href="#"> Подушки </a> 
										<ul>
											<li><a href="#">50x70cm</a>
												<ul>
													<li><a href="#">Караван</a></li>
													<li><a href="#">Бамбук ЭКО</a></li>
													<li><a href="#">ТЧ Бамбук</a></li>
													<li><a href="#">Шарм</a></li>
													<li><a href="#">Люкс</a></li>
													<li><a href="#">Прима</a></li>
													<li><a href="#">Диалог</a></li>
													<li><a href="#">Классика</a></li>
													<li><a href="#">Пуховая</a></li>
													<li><a href="#">Полупуховая</a></li>
													<li><a href="#">Green Line Хлопок</a></li>
													<li><a href="#">Green Line Лён</a></li>
													<li><a href="#">Verossa Camel</a></li>
													<li><a href="#">Verossa Aloe Vera</a></li>
													<li><a href="#">Verossa Classic</a></li>
													<li><a href="#">SPAtex</a></li>
													<li><a href="#">Коллекция 750</a></li>
													<li><a href="#">Коллекция 960 с бортиком</a></li>
													<li><a href="#">Коллекция 925 со вставкой MEMORY</a></li>
													<li><a href="#">Коллекция 875 с валиком</a></li>
													<li><a href="#">Коллекция 916 двухкамерная</a></li>
													<li><a href="#">Эвкалипт</a></li>
													<li><a href="#">Лебяжий пух</a></li>
													<li><a href="#">ГАРМОНИЯ</a></li>
													<li><a href="#">Стандарт</a></li>
													<li><a href="#">Эконом</a></li>
													<li><a href="#">Перо-пуховая подушка "Неженка"</a></li>
												</ul>
											</li>
											<li><a href="#">70x70cm</a>
												<ul>
													<li><a href="#">ТЧ Бамбук</a></li>
													<li><a href="#">Полу-пуховая</a></li>
													<li><a href="#">Green Line Лён</a></li>
													<li><a href="#">Green Line Хлопок</a></li>
													<li><a href="#">Verossa Camel</a></li>
													<li><a href="#">Verossa Aloe Vera</a></li>
													<li><a href="#">Verossa Classic</a></li>
													<li><a href="#">SPAtex</a></li>
													<li><a href="#">Коллекция 750</a></li>
													<li><a href="#">Коллекция 960 с бортиком</a></li>
													<li><a href="#">Коллекция 875 с валиком</a></li>
													<li><a href="#">Эвкалипт</a></li>
													<li><a href="#">Шарм</a></li>
													<li><a href="#">Неженка</a></li>
													<li><a href="#">Люкс</a></li>
													<li><a href="#">Прима</a></li>
													<li><a href="#">Диалог</a></li>
													<li><a href="#">Лебяжий пух</a></li>
													<li><a href="#">ГАРМОНИЯ</a></li>
													<li><a href="#">Стандарт</a></li>
													<li><a href="#">Эконом</a></li>
													<li><a href="#">Классика</a></li>
													<li><a href="#">Пуховая</a></li>
													<li><a href="#">Караван</a></li>
													<li><a href="#">Эко</a></li>
												</ul>
											</li>
											<li><a href="#">70x71cm</a></li>
										</ul>
									</li>
									<li><a href="#"> Наволочки </a> </li>
									<li><a href="#"> Пледы </a> </li>
									<li><a href="#"> Одеяла </a> </li>
									<li><a href="#"> Наматрацники </a> </li>
									<li><a href="#"> Комплекты </a> </li>
								</ul>
						</nav>
						<p class="OTSTUP"> Как только Вы выбрали , что покупать - свяжитесь с нами по номеру телефона <a href="tel:+79856170617">+79856170617</a> или <a href="tel:+79853384516">+79853384516</a>! </p>
						<p class="OTSTUP"> Или свяжитесь с нами в <a href="https://vk.com/korolevanochist"> нашей группе ВКонтакте! </a> </p>
				</div>
	</div>
		<div id="footer">
			Все права защищены. Копирование информации и использование в коммерческих целях преследуется по закону &copy; 2018
		</div>
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

#wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.all {
	background-image:url(../img/shopORDER1.jpg);
	background-size: cover ;
	flex-grow: 2;
	font-size: 1.3em;
	font-family: 'Comfortaa', cursive;
}

.OTSTUP {
	padding-top: 20px;
}

body {
	height:100%;
	color: #ffffff;
	background: #f7f7f7;
	font-size: 1em;
	font-family: "Marck Script" , cursive ;
	line-height: 140%;
	margin: 0;
	padding: 0;
}

.top-right {
	font-size: 2.3em;
	font-family: 'Oswald', sans-serif;
	float: right;
	margin-left: 50px;
	color: #C0F400;
}

.top-left {
	float: left;
}

.menu {
	margin: 0;
	padding: 0;
}

.menu ul,
.menu ol {
	list-style: none;
}

.menu > ul {
	display: flex;
	justify-content: center;
}

.menu > ul li {
	position: relative;
	border-right: 2px solid #403FD7;
}

.menu > ul li a {
	display: block;
	background: background: rgb(64, 77, 137);
background: -webkit-linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 113, 248) 100%);
background: -o-linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 113, 248) 100%);
background: -ms-linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 113, 248) 100%);
background: linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 113, 248) 100%);
	padding: 15px 35px 15px 45px;
	font-size: 25px;
	color: #C0F400;
	text-decoration: none;
	transition: 0.4s ease;
}

.menu > ul li:first-child {
	border-left: 2px solid #403F89;
}

.menu > ul li:last-child {
	border-right: 2px solid #403F89;
}

.menu li a:hover {
	background: rgb(64, 77, 137);
background: -webkit-linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 156, 248) 100%);
background: -o-linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 156, 248) 100%);
background: -ms-linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 156, 248) 100%);
background: linear-gradient(180deg, rgb(64, 77, 137) 55%, rgb(215, 156, 248) 100%);
	color: #ffffff;
	box-shadow: 1px 5px 10px -5px #1A72E6;
	transition: 0.4s ease;
}

header img {
	width: 60px;
}

.logo {
	font-size: 4em;
	font-family: 'Caveat', cursive;
	text-align: center;
	padding-top: 10px; 
}

img {
	max-width: 100%;
	height: 100%;
	width: auto\9;

}

header, #footer {
	width: 98%;
	background-color: #403F89;

}

header {
	border-bottom: 2px solid #ffffff;
	padding: 1%;
}

#footer {
	border-top: 2px solid #ffffff;
	margin-top: 12px;
	padding-top: 30px;
	width: 100%;
	margin: auto;
	height: 100px;
	text-align: center;
	color: #ffffff;
	font-family: 'Comfortaa', cursive;
	font-size: 1em;
}

a {
	color:#C524D3;
	text-decoration: none;
	transition: all.5s ease;
	-moz-transition: all.5s ease;
	-webkit-transition: all.5s ease;
	-ms-transition:all.5s ease;
}

a:hover {
	color: #000000;
	text-decoration: none;
	transition: all.5s ease;
	-moz-transition: all.5s ease;
	-webkit-transition: all.5s ease;
	-ms-transition:all.5s ease;
}

.all a {
	color: 	#E382FF;
}

.all a:hover {
	color: #C0F400;
}

a:active {
	color: #C4FFFF;
}


/* MENUSHKA */

.menu li ul {
	position: absolute;
	min-width: 150px;
	display: none;
}

.menu li:hover > ul {
	display: block;
}

.menu li > ul li {
	border: 1px solid #1A72E6;
}

.menu li > ul li a {
	padding: 10px;
	text-transform: none;
	background: 
}

.menu li > ul li ul {
	position: absolute;
	right: -250px;
	width: 250px;
	top: 0;

}



/*  Videlenie  */

::selection { background: #FFDEE3; color: #000000;
::-moz-selection { background: #FFDEE3; color: #000000;
::-webkit-selection { background: #FFDEE3; color: #000000; }