JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a class="item" href="#">Nabídka 1</a>
         <ul class="subnav">
            <li><a href="#">Podnabídka 1</a></li>
            <li><a href="#">Podnabídka</a></li>
            <li><a href="#">Podnabídka</a></li>
        </ul>  
    </li>
    <li><a class="item" href="#">Nabídka 2</a>
        <ul class="subnav">
            <li><a href="#">Podnabídka 1</a></li>
            <li><a href="#">Podnabídka</a></li>
            <li><a href="#">Podnabídka</a></li>
        </ul>    
    </li>
    <li><a href="#">Nabídka 3</a></li>
    <li><a href="#">Nabídka 4</a></li>
</ul>

CSS

ul.nav{
    list-style:none;
    padding:0;
    display:0;
}

ul.nav li{
    clear:both;
}

.item{
    float:left;
    clear:both;
}


ul.subnav{
    visibility:hidden;
    opacity:0;
    width:0;
    height:20px;
    overflow:hidden;
    float:left;
    list-style:none;
    padding:0;
    margin:0;
}

ul.subnav li{
    display:inline-block;
}

ul.nav li a:hover + ul.subnav {
    visibility:visible;
    opacity:1;
    width:300px;
    transition: all 0.5s ease;
}