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 long</a>
               </li><li>
                   <a href="#" title="">item2 even longer</a>
               </li>
            </ul>
        </li><li>
            <a href="#" title="">NovitĂ </a>
           <ul>
               <li>
                   <a href="#" title="">item1 long</a>
               </li><li>
                   <a href="#" title="">item2 even longer</a>
               </li>
            </ul>
        </li><li>
            <a href="#" title="">Promozioni</a>
        </li>
    </ul>
</navigation>

CSS

/* general */
#main-menu ul {
    list-style: none inside none;
}
#main-menu li {
    display: block;
    vertical-align: top;
    float:left;
}

/* first level */
#main-menu > ul > li > a {
    position: relative;
}
#main-menu > ul > li > a {
    background: silver;
    padding: 5px;
    margin: 0 5px;
    display: block;
}

/* second level */
#main-menu > ul > li > ul {
    position: absolute;
    display: none;
}
#main-menu > ul > li > ul:hover,
#main-menu > ul > li:hover > ul {
    display: block;
}
#main-menu > ul > li > ul > li {
    background: gold;
    padding: 5px;
    margin: 0 5px;
}