Как сверстать такое меню?

Question

[ramzs]

Здравствуйте.
Подскажите пожалуйста, как сверстать такое меню как на скрине:


Вот разметка HTML:
codepen.io/ramzs/pen/pywbJv

Заранее спасибо!

Answer 1

[Сергей Горячев]

ul li {
	float: left;
  width: 25%;
}

codepen.io/anon/pen/GZEqWP
А что тут особенного?

Answer 2

[Василий]

ul {
  list-style-type: none;
  width: 800px;
}
ul li a {
  float: left;
  width: 25%;
  padding: 10px 0;
  background: #ddd;
  text-decoration: none;
  color: #000;
}

Answer 3

[ramzs]

Нужно именно так по макету


Когда делаю так
ul li a {
float: left;
width: 25%;
}
то получается так


ширина контейнера с меню 750px. Увеличить контейнер с меню не вариант