Почему изменяется высота при 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

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

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

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

Войти через центр авторизации

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

HTML

+1 ещё

Простой
Почему не работает свойство backdrop-filter: blur?
- 1 подписчик
- 59 минут назад
- 6 просмотров
0

ответов
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 5 часов назад
- 56 просмотров
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхий угол?
- 2 подписчика
- 10 часов назад
- 120 просмотров
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- вчера
- 164 просмотра
0

ответов
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- вчера
- 300 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- вчера
- 64 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- вчера
- 170 просмотров
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 01 мая
- 110 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 01 мая
- 127 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 96 просмотров
0

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Консультация по UIKit & SwiftUI

03 мая 2024, в 22:42

1500 руб./в час

Разработать приложение (C#, wpf, MS SQL Server)

03 мая 2024, в 22:22

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

Работа со SwiperJs

03 мая 2024, в 22:18

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

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

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

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

Кирилл @quant78

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

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

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

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

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

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

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