JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="">Ссылка 1</a></li>
	<li><a href="">Ссылка 2</a></li>
	<li><a href="">Ссылка 3</a></li>
	<li><a href="">Ссылка 4</a></li>
	<li class="brb"><a href="">Ссылка 5</a>
     <ul>
         <li><a href="">Выпадающий пункт</a></li>
         <li><a href="">Второй пункт</a></li>
         <li><a href="">Пункт три</a></li>
         <li><a href="">Четвертый выпадающий пункт</a></li>
         <li><a href="">Пункт 5</a></li>
     </ul>
    </li>
   </ul>

CSS

ul#menu {
  margin: 0;
  padding: 0;
  display: table;   /*для начала заставим   ul вести себя как табличный элемент */
  width: 100%;
  border-right: 1px solid #fff;
  background: #777;
}
#menu li {
  position:relative;
  display: table-cell;  /*а затем - все li как ячейки одной строки таблицы, то есть выстроим наши картинки в один ряд, о том */
  text-align: center;   /*для красоты*/
  /*width: 11%;*/   /*100%/9=11,1% округляем до 11*/
  border-right: 2px solid #d7e5de;
}
*html #menu li {
  display: inline;
  zoom: 1;  /* обеспечиваем кроссбраузерность к сожалению ie6 table, table-cell не поддерживает, приходится хитрить */
}
#menu a {
  display: block;
  /*background: blue;*/
  padding: 10px 0;
  font: 12px verdana;
  color: #fff;
  text-decoration: none;
}
#menu a:hover {
  background: #333;
}
#menu .brb {
  border-right: none;
}
#menu li ul {   /*Выпадающие пункты*/
  display: none;
  position: absolute;
  /*float: left;*/
  /*left: 0;
  top: 100%;*/
  margin: 0;
  padding: 5px;
  border: solid 1px #9f9d9e;
  border-radius: 3px;
  background: #f9fafa;
}
/*Треугольник для выпадающих пунктов*/
#menu li ul:before, #menu li ul:after {
  content: "";
  position: absolute;
}
#menu li ul:before {
    border-left: 10px solid rgba(113, 101, 58, 0);
    border-right: 10px solid rgba(113, 101, 58, 0);
    border-bottom: 10px solid #9f9d9e;
    left: 45%;
    top: -10px;
}
#menu li ul:after {
    border-left: 10px solid rgba(255, 241, 190, 0);
    border-right: 10px solid rgba(255, 241, 190, 0);
    border-bottom: 10px solid #f9fafa;
    left: 45%;
    top: -9px;
}
/*Конец треугольника*/
#menu ul li a:link {
  color: #474747;
  /*display: inline-block;*/    /*Делаем ссылку только вокруг текста*/
  padding: 3px;
  border-radius: 3px;
  text-align: left;
  font: normal 12px Arial;
}
#menu ul li a:hover {
  background: #70379c;
  color: #fff;
}
#menu li:hover ul {
  display: block;
  /*float: left;*/
}
#menu ul li {
  position: relative; /* Подпункты позиционируются...