JSFiddle - React, Tailwind, and code Playground

by Dmitry Fateev

HTML

<div class="header">
  <ul>
    <li>Home
      <ul class="menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </li>
    <li>News</li>
    <li>Articles</li>
    <li>About</li>
    <li>Contacts</li>
  </ul>
</div>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header
{
  overflow: hidden;

  height: 60px;
  padding-left: 30px;

  color: #FFF;
  background-color: #1B1B1B;
}

.header li
{
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

.header > ul > li {
  display: flex;
  float: left;
  flex-direction: column;
}

.menu {
  display: none;
}