Почему изменяется высота при hover на выподающее меню?

Question

Alex_2222 @Alex_2222

Почему изменяется высота при hover на выподающее меню?

При наведении на меню выпадает подменю,на "Home" у подменю одна высота,а на"Store"высота почему-то меняется в
меньшую сторону.Я не вижу где косяк,помогите разобраться.Спасибо!

SASS (много)

.sidebar_left 
	width: 250px
	margin-top: 15px
	ul
		padding: 0
		margin: 0
		list-style-type: none 
	.menu_list 
		a
			font-size: 16px
			font-family: "RobotoRegular", sans-serif
			font-weight: normal
			line-height: 20px
			display: block
			background: #fff
			color: #475055
			padding: 20px 0 20px 30px
			text-decoration: none
			border-bottom: 1px solid #e1e5e7
			transition: 0.5s all
			&:hover
				background: #56CCC8
				color: #FFF
				padding: 20px 0 20px 40px
			&:hover .fa
				color: #fff     
	.mnu_drop
		border-bottom: 1px solid #47627c 
		a
			font-size: 15px
			font-family: "RobotoLight", sans-serif
			font-weight: normal
			line-height: 10px
			display: block
			background: #152840
			color: #fff	
			padding: 20px 0 10px 20px
			text-decoration: none
			border: none
			transition: 0.5s all
			&:hover
				background: #263A54
				color: #56CCC8 
				padding: 20px 0 10px 30px   					
				
.sidebar_left .menu_list	
	position: relative
	&:hover  .mnu_drop
		opacity: 1
		top: 0
.sidebar_left .mnu_drop
	position: absolute
	width: 100%
	top: -9999em
	left: 100% 
	opacity: 0
.sidebar_left .menu_list	
	position: relative
	&:hover  .one
		opacity: 1
		top: 0	
.sidebar_left .menu_list	
	position: relative
	&:hover  .two
		opacity: 1
		top: -61px
.sidebar_left .menu_list	
	position: relative
	&:hover  .three
		opacity: 1
		top: -122px
.sidebar_left .menu_list	
	position: relative
	&:hover  .four
		opacity: 1
		top: -183px
.sidebar_left .menu_list	
	position: relative
	&:hover  .five
		opacity: 1
		top: -244px
.sidebar_left .menu_list	
	position: relative
	&:hover  .six
		opacity: 1
		top: -305px
.sidebar_left .menu_list	
	position: relative
	&:hover  .seven
		opacity: 1
		top: -366px

.menu_list
	.fa
		position: relative
		font-size: 18px
		color: #C5CDD1 
		margin-right: 40px
.mnu_drop
	.fa
		position: relative  
		font-size: 18px
		line-height: 18px
		right: -40px 
		opacity: 0
.mnu_drop 
	a
	&:hover  .fa
		opacity: 1
		color: #56CCC8

HTML (много кода)

<div class="container">
	<div class="row">
		<div class="col-md-6">
			<div class="sidebar_left">
				<ul class="menu">
					<li class="menu_list"><a href="#"><i class="fa fa-home"></i>Home</a>
						<ul class="mnu_drop one">
							<li><a href="#">Tech<i class="fa fa-arrow-circle-right"></i></a></li>
							<li><a href="#">Software & Apps<i class="fa fa-arrow-circle-right"></i></a></li>
							<li><a href="#">Gadgets<i class="fa fa-arrow-circle-right"></i></a></li>
							<li><a href="#">Mobile<i class="fa fa-arrow-circle-right"></i></a></li>
						
						
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">Film</a></li>
							<li><a href="#">Gaming</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Sport</a></li>
						
						
							<li><a href="#">Business</a></li>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Marketing</a></li>
							<li><a href="#">Media</a></li>
						
						
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Home</a></li>
							<li><a href="#">Health & Fitmess</a></li>
							<li><a href="#">Travel & Leisure</a></li>
						</ul>
					</li>
						
					 <li class="menu_list"><a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
						<ul class="mnu_drop two">
							<li><a href="#">Tech</a></li>
							<li><a href="#">Software & Apps</a></li>
							<li><a href="#">Gadgets</a></li>
							<li><a href="#">Mobile</a></li>
						
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">Film</a></li>
							<li><a href="#">Gaming</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Sport</a></li>
						
							<li><a href="#">Business</a></li>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Marketing</a></li>
							<li><a href="#">Media</a></li>
						
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Home</a></li>
							<li><a href="#">Health & Fitmess</a></li>
							<li><a href="#">Travel & Leisure</a></li>
						</ul>
					</li>
					
					<li class="menu_list"><a href="#"><i class="fa fa-book"></i>Blog</a>
						<ul class="mnu_drop three">
							<li><a href="#">Tech</a></li>
							<li><a href="#">Software & Apps</a></li>
							<li><a href="#">Gadgets</a></li>
							<li><a href="#">Mobile</a></li>
						
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">Film</a></li>
							<li><a href="#">Gaming</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Sport</a></li>
						
							<li><a href="#">Business</a></li>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Marketing</a></li>
							<li><a href="#">Media</a></li>
						
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Home</a></li>
							<li><a href="#">Health & Fitmess</a></li>
							<li><a href="#">Travel & Leisure</a></li>
						</ul>
					</li>
					
					<li class="menu_list"><a href="#"><i class="fa fa-users"></i>Community</a>
						<ul class="mnu_drop four">
							<li><a href="#">Tech</a></li>
							<li><a href="#">Software & Apps</a></li>
							<li><a href="#">Gadgets</a></li>
							<li><a href="#">Mobile</a></li>
						
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">Film</a></li>
							<li><a href="#">Gaming</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Sport</a></li>
						
							<li><a href="#">Business</a></li>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Marketing</a></li>
							<li><a href="#">Media</a></li>
						
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Home</a></li>
							<li><a href="#">Health & Fitmess</a></li>
							<li><a href="#">Travel & Leisure</a></li>
						</ul>
					</li>
					
					<li class="menu_list"><a href="#"><i class="fa fa-trophy"></i>Contests</a>
						<ul class="mnu_drop five">
							<li><a href="#">Tech</a></li>
							<li><a href="#">Software & Apps</a></li>
							<li><a href="#">Gadgets</a></li>
							<li><a href="#">Mobile</a></li>
						
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">Film</a></li>
							<li><a href="#">Gaming</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Sport</a></li>
						
							<li><a href="#">Business</a></li>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Marketing</a></li>
							<li><a href="#">Media</a></li>
						
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Home</a></li>
							<li><a href="#">Health & Fitmess</a></li>
							<li><a href="#">Travel & Leisure</a></li>
						</ul>
					</li>
					
					<li class="menu_list"><a href="#"><i class="fa fa-ban"></i>About</a>
						<ul class="mnu_drop six">
							<li><a href="#">Tech</a></li>
							<li><a href="#">Software & Apps</a></li>
							<li><a href="#">Gadgets</a></li>
							<li><a href="#">Mobile</a></li>
						
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">Film</a></li>
							<li><a href="#">Gaming</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Sport</a></li>
						
							<li><a href="#">Business</a></li>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Marketing</a></li>
							<li><a href="#">Media</a></li>
						
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Home</a></li>
							<li><a href="#">Health & Fitmess</a></li>
							<li><a href="#">Travel & Leisure</a></li>
						</ul>
					</li>

					<li class="menu_list"><a href="#"><i class="fa fa-envelope"></i>Contact</a>
						<ul class="mnu_drop seven">
							<li><a href="#">Tech</a></li>
							<li><a href="#">Software & Apps</a></li>
							<li><a href="#">Gadgets</a></li>
							<li><a href="#">Mobile</a></li>
						
							<li><a href="#">Entertainment</a></li>
							<li><a href="#">Film</a></li>
							<li><a href="#">Gaming</a></li>
							<li><a href="#">Music</a></li>
							<li><a href="#">Sport</a></li>
						
							<li><a href="#">Business</a></li>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Marketing</a></li>
							<li><a href="#">Media</a></li>
						
							<li><a href="#">Lifestyle</a></li>
							<li><a href="#">Home</a></li>
							<li><a href="#">Health & Fitmess</a></li>
							<li><a href="#">Travel & Leisure</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-md-6"></div>
	</div>
</div>

Вопрос задан более трёх лет назад
265 просмотров

Комментировать

Подписаться 2 Оценить Комментировать

Решения вопроса 1

5 комментариев

Alex_2222 @Alex_2222 Автор вопроса

В этом-то и загвоздка,я не пойму почему меняется padding? :)

Написано более трёх лет назад
Max @SuperMax899

Alex_2222: у тебя в верстке в первом случае стоят элементы, во втором их нету

Написано более трёх лет назад
Max @SuperMax899
Alex_2222:
<li><a href="#">Tech<i class="fa fa-arrow-circle-right"></i></a></li>
Написано более трёх лет назад
Alex_2222 @Alex_2222 Автор вопроса

АААА!!!Спасибо,ну конечно,вот почему он(padding) меняется.Спасибо за помощь!

Написано более трёх лет назад
Max @SuperMax899

Alex_2222: всегда пожалуйста:)

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 3 часа назад
- 41 просмотр
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 18 часов назад
- 61 просмотр
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 30 просмотров
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 94 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 82 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 85 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 102 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 17 дек.
- 250 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Веб-дизайн клининговой компании

22 дек. 2024, в 17:54

10000 руб./за проект

Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры

22 дек. 2024, в 17:45

10000 руб./за проект

Написать макросы для excel

22 дек. 2024, в 17:39

2000 руб./за проект

Answer 1 · 2016-01-23 18:33:50

Это пофиксить можно проще -- правой кнопкой мыши по элемнту, проверить код, справа в разделе css ищем padding, где то подменяется другим значением. Там он сам покажет, где перекрытие идет.

Answer 2 · 2016-01-23 18:30:24

Кирилл @quant78

height поставь одинаковую

Ответ написан более трёх лет назад

Комментировать

Почему изменяется высота при hover на выподающее меню?

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

Минуточку внимания

Войдите на сайт