JSFiddle - React, Tailwind, and code Playground

by abarykin

HTML

<header>
  <nav class="menu_category menu-horizontal menu-hover-expand">
    <ul>
      <li><a href="#">123</a></li>
      <li><a href="#">123</a></li>
      <li><a href="#">123</a></li>
      <li><a href="#">123</a></li>
      <li><a href="#">123 123</a></li>
      <li><a href="#">132</a></li>
      <li><a href="#">132</a></li>
      <li><a href="#">132322 2</a></li>
    </ul>
  </nav>
</header>

CSS

header {
  height: 300px;
}

header nav.menu_category {
  position: absolute;
  left: 0;
  top: 168px;
  width: 100%;
  outline: 1px solid #000;
}

header nav.menu_category > ul {
  display: table !important;
  border-collapse: collapse;
  width: 100%;
}

header nav.menu_category > ul > li {
  display: table-cell !important;
  outline: 1px solid #000;
}

header nav.menu_category > ul > li > a {
  display:block;
	float:left;
	outline:1px solid #0f0;
}