CSS3

Горизонтальное меню с элементами одинаковой ширины

Ваш браузер не поддерживает плавающие фреймы!

Самый простой вариант разметки — задать элементам списка одинаковую ширину, указав ее в процентах относительно ширины элемента-контейнера.

Разметка HTML

<nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</nav>

Стили CSS

nav {
  display: block;
  position: relative;
}
nav:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  background: linear-gradient(90deg, 
    #CDE0EE, #CDE0EE 20%,
    #EBF0F3 20%, #EBF0F3 40%, 
    #9BB0C1 40%, #9BB0C1 60%, 
    #5D8BAD 60%, #5D8BAD 80%,
    #041E34 80%, #041E34 100%);
}
ul {
  width: 660px;
  margin: 0 auto;
  padding-left: 0;
  list-style: none;
  overflow: hidden;
}
li {
  float: left;
  width: 25%;
}
a {
  text-decoration: none;
  text-align: center;
  display: block;
  color: #868686;
  padding: 0.5em 0;
  font-size: 2em;
  font-weight: bold;
  transition: 0.5s ease-in-out;
  font-family: 'Montez', cursive; /*скачать шрифт можно с сайта https://www.google.com/fonts/*/
}
a:hover {
  color: #f70211;
}

Андрей