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
}