Как заставить картинку не прыгать?

Question

[Ratibor]

Доброе время суток! Проблема такая, вот ради тренировки верстаю страничку https://ratibor1978.github.io/bikeshop/ , так вот при нажатии на пункт меню bicycles открывается подменю и вся картинка прыгает, понимаю что надо при hover этого пункта меню уменьшить margin-top у всего меню но вот не могу его реализовать, помогите как уменьшить margin-top меню при hover одного из пунктов меню?

Comments

[Максим Калинин]

А что за блок:

<section class="slider">
  <div class="slider__img-slider">
  </div>

и фон сайта почему-то для него задан, а не для body.

.slider__img-slider {
  margin-top: -86px;
  width: 100%;
  min-height: 980px;
  background: url("../img/slide.jpg") no-repeat;
  background-size: cover; }

Наверное я чего-то не понимаю.

[Ratibor]

Максим Калинин: я хочу потом сделать слайдер, и при нажатии на кнопки менялся фон у этого блока, пока кнопок нет только одна картинка слайдера или не так делаю?

Answer 1

[AlexKeller]

Чтобы не прыгало меню, задайте бордер по умолчанию для пунктов меню:
border: 5px solid transparent;
Или, если не добавлять дефолтный бордер, на :hover добавить марджинов:

.page-header__menu-item-open:hover {
  ...
  margin-top: -5px;
  margin-bottom: -5px;
}

Answer 2

[Максим Калинин]

Если задавать фон для body, не для какого-то section с классом slider, то картинка прыгать не будет.

body {
    position: relative;
    font-family: robotolight, Arial, sans-serif;
    background: url(../img/slide.jpg) no-repeat;
}

Правда менюшка всё-равно прыгает при наведении. Не знаю как это поправить, сам верстать учусь только.

Answer 3

[Ratibor]

скачки картинки решил абсолютным позиционированием, осталось заставить не прыгать меню