JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Опция 1</a></li>
    <li>
        <a href="#">Опция 2 &darr;</a>
        <ul>
            <li><a href="#">Подопция 1</a></li>
            <li><a href="#">Подопция 2</a></li>
            <li><a href="#">Подопция 3</a></li>
        </ul>        
    </li>
    <li><a href="#">Опция 3</a></li>
</ul>

CSS

body{
padding:20px;
}

ul{
position:relative;
background:#eee;    
padding:5px;
}

li{
position:relative;
margin:0 5px 0 0;    
background-color:#ddd;
float:left;
}

a{
font:12px/20px Arial,sans-serif;
padding:5px;
display:block;
height:20px;
white-space:nowrap;
text-decoration:none;
color:#333;
text-shadow:0 1px 0 #fff;   
}

a:hover{
 background-color:rgba(0,0,0,.1);   
}

ul:after{
    content:".";
    display:block;
    height:0;
    overflow:hidden;
    text-indent:-9000px;
    line-height:0;
    font-size:0;
    clear:both;
}


ul li li{
margin:0;
float:none;   
}

ul ul{
display:none; 
position:absolute;
top:30px;
left:0;  
padding:0;    
}

ul li:hover ul{
 display:block;   
}