JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="mainNav">
        <ul>
            <li class="menu-item"><a href="">Главная</a></li>
            <li class="menu-item"><a href="">Новости</a>
                <ul class="submenu left">
                    <li class="menu-item"><a href="">Все</a> </li>
                    <li class="menu-item"><a href="">Происшествия</a></li>
                    <li class="menu-item"><a href="">Экономика</a></li>
                    <li class="menu-item"><a href="">Общество</a></li>
                </ul>
            </li>
            <li class="menu-item"><a href="">Погода</a></li>
            <li class="menu-item"><a href="">Программа</a></li>
            <li class="menu-item"><a href="">Афиша</a></li>
        </ul>
    </nav>

CSS

.mainNav {
  width: 100%;
  zoom: 1;
}
.mainNav:before {
  content: '';
  display: block;
}
.mainNav:after {
  content: '';
  display: table;
  clear: both;
}
.mainNav ul {
  zoom: 1;
}
.mainNav ul:before {
  content: '';
  display: block;
}
.mainNav ul:after {
  content: '';
  display: table;
  clear: both;
}
.mainNav li {
  list-style: none;
}
.menu-item {
  float: left;
  border: 1px solid transparent;
  position: relative;
}
.menu-item a {
  line-height: 20px;
  text-decoration: none;
}
.submenu {
  position: absolute;
  top: 20px;
  white-space: nowrap;
}
.submenu.left {
  left: 0;
}
.submenu.right {
  right: 0;
}
.submenu .menu-item {
    float: none;
    display: inline-block;
}