Как позиционировать меню по высоте внутри родительского блока?

Подскажите, как поднять или опустить пункты меню в хедере? Делаю свой сайт на примере Киномонстра, реализация меню в точности такая же. Хедер у меня невысокий, поэтому я не хочу использовать свойство Padding — оно расширяет родительский блок (menubar) и тот вылезает вниз, на "территорию" основного контента. Какие есть способы позиционировать меню внутри блока, не меняя его размер?

html

css

2 ответов

Попробуйте связку position: absolute и position: relative.

Вот пример:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
  <div class="cont">
      <div class="el"></div>
  </div>
</body>
</html>

CSS

.cont {
  position:relative;
  width:20px;
  height:100px;
  padding:0 50px; 
  background-color:black;
}

.el {
    position: absolute;
    margin: 45px 0 0 5px;
    width: 15px;
    height: 15px;
    background-color:red;
}

Спасибо за наводку!