JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contenedor-menu-desplegable">
    <ul class="menu-desplegable">
        <li><a href="#">Opción 1</a></li>
        <li><a href="#">Opción 2</a></li>
        <li><a href="#">Opción 3</a></li>
    </ul>
</div>

CSS

.menu-desplegable{
    margin: 0px;
    padding:0px;
    list-style-type: none;
}

.menu-desplegable li{
    background-color: pink;
    margin: 1px;
    padding:0px;
}

.menu-desplegable li:hover{
    background-color: #FA8F8F;
    
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}

.menu-desplegable a{
    display:block;
    padding:5px;
    color: black;
    text-decoration: none;
    font-family: Arial, sans-serif;
    text-align:center;
}