JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
  <li class="item-1 active"><a href="page-1.html#item-1">Item 1</a></li>
  <li class="item-2"><a href="page-2.html#item-2">Item 2</a></li>
  <li class="item-3"><a href="page-3.html#item-3">Item 3</a></li>
  <li class="item-4"><a href="page-4.html#item-4">Item 4</a></li>
</ul>

CSS

#menu {
  border: 1px solid gray;
  padding: .25em;
  background: lightgray;
  float: left;
  position: relative;
  margin: 0;
}

#menu:before {
  float: right;
  border-left: 5px solid transparent;
  border-top: 5px solid #6D5300;
  border-right: 5px solid transparent;
  content: "";
  margin-top: .5em;
}

#menu li {
  display: none;
  margin: 0 1em 0 0;
  padding: 0;
}

#menu li.active {
  display: block;
}

#menu li:hover {
  background: #eee;
}

#menu:hover li {
  display: block
}