JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li> <a href="index.html" title="inicio ">Estamos en</a>

        <ul>
            <li> <a href="">somos</a> 
            </li>
            <li> <a href="">Ubicación</a> 
            </li>
            <li> <a href="">Contacto</a> 
            </li>
        </ul>
    </li>
    <li id="nav"><a href="index.html" title="inicio ">Servicios</a>

        <ul>
            <li> <a href="">Documentos</a> 
            </li>
            <li> <a href="">Datos</a> 
            </li>
            <li> <a href="">Casas</a> 
            </li>
            <li> <a href="">Elementos</a> 
            </li>
        </ul>
    </li>
    <li><a href="index.html" title="inicio ">Enlaces</a>

        <ul>
            <li> <a href="">Teléfonos</a>

            </li>
            <li> <a href="">Direcciones</a>

            </li>
            <li> <a href="">Diccionario</a>

            </li>
            <li> <a href="">Misceláneo</a>

            </li>
            <li> <a href="">enlaces</a>

            </li>
            <li> <a href="">Prensa</a>

            </li>
            <li> <a href="">Enlaces a otros Sitios</a>

            </li>
        </ul>
    </li>
    <li><a href="index.html" title="inicio ">Privado</a>

        <ul>
            <li> <a href="" target="_blank">correo</a> 
            </li>
            <li> <a href="s" target="_blank">enlace</a> 
            </li>
        </ul>
    </li>
    <li><a href="index.html" title="inicio ">Mapa del Sitio</a>

        <ul>
            <li> <a href="">Mapa Web</a> 
            </li>
        </ul>
    </li>
</ul>

CSS

ul, ol {
    list-style:none;
}
.nav li a {
    display: block;
    background-color: white;
    color: black;
    text-decoration: none;
}
.nav > li {
    position: relative;
    font-family: Arial, Verdana, serif, cursive, monospace, sans-serif, fantasy;
    font-size: 16px;
    text-align: left;
    padding: 1px;
    background-color: white;
    color: black;
    height: 26px;
    width: 180px;
    border: 1px solid black;
}
.nav > li a:hover {
    background-color: #edf1e0;
    color: black;
    height: 30px;
    width: 180px;
}
.nav li ul {
    display: none;
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: 2;
}
.nav li:hover > ul {
    display: block;
    background-color: #edf1e0;
    color: black;
}
.nav li ul li {
    position: relative;
    background-color: white;
    color: black;
    padding: 1px;
    font-family: Arial, Verdana, serif, cursive, monospace, sans-serif, fantasy;
    font-size: 14px;
    width: 180px;
    height: 30px;
    border: 1px solid black;
}