JSFiddle - React, Tailwind, and code Playground

HTML

<li class='right'> Benvenuto
                            <ul>
                                    <li> <a href="materiains.asp"> <p> Inserisci Materia </p> </li>
                                    <li> <a href="argomentoins.asp"> <p> Inserisci Argomento </p> </li>
                            </ul>
</li>

CSS

.right {width:200px;}

li.right:first-child {
    display: block;
}

li.right ul{
  
    visibility: hidden;
    width: inherit;
    color: #E6E6E6;
    line-height:3;
    display: block;
    position: absolute;
    z-index: 75;
    background-color: #484848;
}

li.right:hover > ul, li.right ul:hover {
   visibility: visible;
    margin: 0 auto;
    padding: 0;
}

li.right ul li:hover{
    background-color: #3b3b3b;
}

li.right ul li p {
    margin:0;
    color: #E6E6E6;
    font-size: 15px;
    text-align: center;
}