JSFiddle - React, Tailwind, and code Playground

HTML

<nav role="navigation">
<ul id="nav" class="sub-menu">
<li class="dropdown">Cadastro
<ul>
<li class="dropdown-content"><a href="/Cadastro/cdsEmpresa.aspx">Cadastro de Órgão</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqFornecedor.aspx">Fornecedores</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqGestores.aspx">Gestores</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqGerente.aspx">Gerente de Contrato</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqUnidadeGestora.aspx">Unidades Gestoras</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqUnidadeControle.aspx">Unidades de Controle</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqPedidoBemServico.aspx">Pedido de Bens e Serviços</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqElemento.aspx">Elemento de Despesa</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqDotacao.aspx">Dotação Orçamentária</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqFonteRecurso.aspx">Fontes/Destinação de Recursos</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqUnidadeMedida.aspx">Unidade de Medida</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqMarca.aspx">Marca</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqProduto.aspx">Bens e Serviços</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqAquisicao.aspx">Modalidade de Aquisição</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqModaLicitacao.aspx">Modalidade de Licitação</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqTipoLicitacao.aspx">Tipos de Licitação</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqOperador.aspx">Operador</a></li>
</ul>
</li>

<li class="dropdown">Movimentos
<ul>
<li class="dropdown-content"><a href="/Pesquisa/psqLicitacao.aspx">Licitação</a></li>
<li class="dropdown-content"><a href="/Pesquisa/psqOrdemCompra.aspx">Ordem de Compra</a></li>
<li class="dropdown-content"><a...

CSS

a {
  text-decoration: none;
}

nav {
    font-family: monospace;
}

ul {
  background: darkorange;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

li {
    color: #fff;
  background: darkorange;
    display: block;
    float: left;
    padding: 1rem;
    position: relative;
    text-decoration: none;
  transition-duration: 0.5s;
}
  
li a {
  color: #fff;
}

li:hover {
    background: red;
    cursor: pointer;
}

ul li ul {
    background: orange;
    visibility: hidden;
  opacity: 0;
  min-width: 5rem;
    position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
    left: 0;
  display: none;
}

ul li:hover > ul,
ul li:focus-within > ul, /* this is the line we add */
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
    clear: both;
  width: 100%;
}