JSFiddle - React, Tailwind, and code Playground

HTML

<navigation id="main-menu">
<ul>
    <li class="first"><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Chi siamo</a>
       <ul><li><a href="#" title="">item1</a></li> <li><a href="#" title="">item2</a></li></ul>
    </li>
    <li><a href="#" title="">NovitĂ </a></li>
    <li><a href="#" title="">Promozioni</a> </li>
</ul>
</navigation>

CSS

/* level 1 Main menu ----------------------------------------- */

#main-menu > ul{
    margin: 10px;
    list-style:none;
    position:relative;
 }

#main-menu > ul > li{
    float:left;
    display:block;
    margin-left:1em;
    background: yellow;
    padding: 3px;
}

#main-menu > ul > li.first{
    margin-left:0;
}


/* sub Main menu ----------------------------------------- */

#main-menu > ul > li ul {
    background: orange;
    position: absolute;
    z-index:1000;
    display:none;
    top:28px;
}

#main-menu > ul > li:hover ul {
    display: block;
}

#main-menu > ul > li ul li{

    display:inline-block;
    list-style:none;
    padding: 3px;
}