JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_top">
        <ul>
              <li><a href="#">All Clients</a></li>
<li id="branch"><a href="#">Branchs</a>
<ul>
<li><a href="#">HO</a></li>
<li><a href="#">Vinnitsa</a></li>
<li><a href="#">Donetsk</a></li>
</ul>

</li>
              <li><a href="#">Board</a></li>
              <li><a href="#">Considering</a></li>
              <li><a href="#">New Client</a></li> 
        </ul> 
        </div>

CSS

#menu_top {
    background-color: #5db22f;
    border-bottom: 1px solid black;
    overflow: hidden;
    }

#menu_top ul li {
    float: left;
    list-style:none;
}

li a {
    display:block;
    font:18px Georgia, Arial, sans-serif;
    color:#fff;
    text-decoration:none;
    padding:15px 20px 15px 20px;  
    }
#menu_top ul li ul {
    width: 100px;
    } 

#menu_top ul li ul {
    display: none;
    position: absolute;
    top:51px;  
    left:120px;
    background-color: #5db22f;
    }
#menu_top ul li ul li a {
    padding:5px 20px 5px 20px;
    font:14px Georgia, Arial, sans-serif;
    }
#menu_top ul li a:hover {
    color: black;
    }
#menu_top ul #branch:hover ul {
    display: block;
}