Горизонтальное меню в два ряда

Question

    <nav class="menu-8">
    <ul>
        <li class="flex-item-h"><a>Головна</a></li>
        <li class="flex-item-h"><a>О компании</a></li>
        <li class="flex-item-h"><a>Информация о том как доехать</a></li>
        <li class="flex-item-h"><a>О нас</a></li>
        <li class="flex-item-h"><a>Продукции</a></li>
        <li class="flex-item-h"><a>Наши успехи</a></li>

        <li class="flex-item-h"><a>Наши работники</a></li>
        <li class="flex-item-h"><a>Наши зарплаты</a></li>
    </ul>
</nav>
    .menu-8 ul {
    display: flex;
    background-color: #188bcc;
    border: 2px solid #0b00ff;
    list-style: none;
    justify-content: space-between;
}
.flex-item-h{
    color: white;
}
.menu-8 ul a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
}
.flex-item-h:hover {
    background-color: white;
    color: #188bcc; /* Цвет ссылки */
}

Как сделать так как на картинке

Answer 1

*полный экран

* {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

ul { list-style-type: none; }

.nav {
  max-width: 850px;
  margin: 0 auto;
  background-color: blue;
  border: 2px solid black;
}

.nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  color: #fff;
}

.nav__item {
  font-size: 18px;
  padding: 15px;
  cursor: pointer;
}

.nav__item:hover {
  background-color: #fff;
  color: blue;
}

<nav class="nav" role="navigation">
  <ul class="nav__list">
    <li class="nav__item">Главная</li>
    <li class="nav__item">О компании</li>
    <li class="nav__item">Информация о том, как доехать</li>
    <li class="nav__item">О нас</li>
    <li class="nav__item">Продукция</li>
    <li class="nav__item">Наши успехи</li>
    <li class="nav__item">Наши работники</li>
    <li class="nav__item">Наши зарплаты</li>
  </ul>
</nav>

БЛОГ НА HUSL

Горизонтальное меню в два ряда

Ответы (1 шт):