:root {
/*  
    +-
    --cor-fundo: rgb(34, 41, 37);
    --cor-hover: rgb(118, 180, 145);
    --cor-primaria: rgb(231, 241, 236);

    bom
    --cor-fundo: rgb(132, 177, 224);
    --cor-hover: rgb(0, 92, 255);
    --cor-primaria: rgb(0, 25, 144);
*/
    --cor-fundo: rgb(187, 192, 224);
    --cor-hover: rgb(0, 92, 255);
    --cor-primaria: rgb(0, 25, 144);
    --cor-botton: 2px solid #36608b;
	--cor-separadores: 1px #fff solid;
}

.dp-menu ul {
    list-style-type: 5px #fff solid;
    padding: 0;
	font-size:8;
}

.dp-menu ul {
    background-color: var(--cor-fundo);
	border-bottom: var(--cor-botton);
}

.dp-menu ul li {
    display: inline;
    position: relative;

}

.dp-menu ul li a {
    color: var(--cor-primaria);
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    transition: background .3s;
    border-right: var(--cor-separadores);
	flex-grow: 1;
	position: relative;
	 
}
/*  "t"  -> primeiro item do menu, aparecer separador antes */
.dp-menu ul li t {
    color: var(--cor-primaria);
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    transition: background .3s;
    border-right: var(--cor-separadores);
	flex-grow: 1;
	position: relative;
	 
}
.dp-menu ul li a:hover {
    background-color: var(--cor-hover);
	color: white;
	flex-grow: 1;
	position: relative;
	border-right: 1px #000 solid;	
}

/*sub menu*/
.dp-menu ul ul {
    display: none;
    left: 0;
    position: absolute;
}

.dp-menu ul li:hover ul {
    display: block;
}

.dp-menu ul ul {
    width: 150px;

}

.dp-menu ul ul li a {
    display: block;

}