JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dernatumin">
<li><a href="#"><b><span>ZORNET.RU</span></b><em></em></a></li>
<li><a href="#"><b><span>ZORNET.RU</span></b><em></em></a></li>
<li><a href="#"><b><span>ZORNET.RU</span></b><em></em></a></li>
<li><a href="#"><b><span>ZORNET.RU</span></b><em></em></a></li>
</ul>

CSS

.dernatumin {
padding:0; margin:0; list-style-type:none; white-space:nowrap; }
.dernatumin li {
float:left; min-width:100px; }
.dernatumin a {
position:relative; display:block; text-decoration:none; min-width:100px; float:left; }
* html .dernatumin a { width:100px; }
.dernatumin a span {
    display: block;
    color: #f5ecec;
    background: #62920d;
    border: 1px solid #efe9e9;
    border-width: 3px 2px;
    text-align: center;
    padding: 5px 17px;
    cursor: pointer;
}
* html .dernatumin a span { width:100px; cursor:hand; }
.dernatumin a b { display:block; border-bottom:2px solid #06a; }
.dernatumin a em { display:none; }
.dernatumin a:hover { background:#f1eaea; }
.dernatumin a:hover span { color:#ece7e7; background:#0b4663; }
.dernatumin a:hover em {
    display: block;
    overflow: hidden;
    border: 6px solid #09629e;
    border-color: #105a8c #f1eeee;
    border-width: 6px 6px 0 6px;
    position: absolute;
    left: 50%;
    margin-left: -6px;
}