JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
   
    <body>
        <ul class="main-menu">
            <li><a href="#company">О компании</a></li>
            <li><a href="#services">Услуги</a>
                <ul class="sub-menu">
                    <li><a href="#1">Разработка</a></li>
                    <li><a href="#2">Продвижение</a></li>
                    <li><a href="#3">Контекст</a></li>
                </ul>
            </li>
            <li><a href="#team">Сотрудники</a></li>
            <li><a href="#contacts">Контакты</a></li>
        </ul>
    </body>
</html>

CSS

.main-menu{
    width:180px;
    padding:0;
    margin:0;
    list-style:none;
}
.main-menu a{
    display:block;
    padding:8px 14px;
    margin-bottom:-1px;
    color:#0088CC;
    text-decoration:none;
    border:1px solid #E5E5E5;
}
.main-menu a:hover{
    background:#F5F5F5;
}

.main-menu>li{
    position:relative;
}
.main-menu>li:hover ul{
    display: block;
}
/* подменю */
.main-menu .sub-menu{
    display: none;
    position: absolute;
    top:0;
    right: -119px;
    padding:0;
    margin:0;
    list-style:none;
    background:#FCF8E3;
}
body{
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;
    padding:10px;
}