JSFiddle - React, Tailwind, and code Playground

HTML

<li class="menu2">

  <i>B</i>

  <ul class="link2">
    <div class='sub_menu_seta'></div>

    <li class='sub_menu2 sub_menu2_inicio'>Sobre</li>

    <li class='sub_menu2 sub_menu2_fim'><b>Feedback</b></li>
  </ul>
</li>

CSS

.menu2 {
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 2px 5px;
  height: 25px;
}

.link2 {
  margin: 0px 0 0 -225px;
  padding: 0;
  position: absolute;
  top: 28px;
  width: 260px;
  visibility: hidden;
  z-index: 5;
}

.sub_menu2_inicio {
  border-top: 1px solid #ffffff;
}

.sub_menu2 {
  padding: 10px 8px;
  cursor: pointer;
  display: block;
  color: #ffffff;
  background: #484848;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}

.sub_menu2_fim {
  border-bottom: 1px solid #ffffff;
}

.sub_menu2:hover {
  background: #1E90FF;
}

.menu2:hover ul {
  display: block;
  visibility: visible;
  left: 0;
}

.sub_menu_seta {
  padding: 10px 8px;
}

.sub_menu_seta::after {
  content: '';
  width: 0px;
  height: 0px;
  display: block;
  position: absolute;
  margin: auto;
  left: 225px;
  right: 0;
  top: 7px;
  border-bottom: 7px solid #484848;
  border-right: 7px solid rgba(0, 0, 0, 0);
  border-left: 7px solid rgba(0, 0, 0, 0);
  border-top: 7px solid rgba(0, 0, 0, 0);
}