Do not adjust menu when submenu appears

Question

I’m starting with flexbox, I would like to make a menu that does not adjust the width when submenus appear:

/* Navigation - menu style */
nav ul {
    padding: 0;
}
nav ul li {
    list-style: none;
    flex-direction: column;
}
nav > ul {
    justify-content: space-evenly;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
nav > ul, nav > ul > li, nav > ul > li:hover > ul > li {
    display: flex;
}
nav > ul > li > ul > li {
    display: none;
}

<nav>
    <ul>
        <li>Home</li>
        <li>Usuários
            <ul>
                <li>Conectar</li>
                <li>Cadastrar</li>
                <li>Meu perfil</li>
                <li>ITEM MUITO LARGO</li>
            </ul>
        </li>
        <li>UFEF</li>
    </ul>
</nav>

I tried a few things, but to no avail

Answer 1

Just add the property flex in menus. To keep word alignment in the center add text-align: center;:

/* Navigation - menu style */
nav ul {
    padding: 0;
}
nav ul li {
    list-style: none;
    flex-direction: column;
    text-align: center;
}
nav > ul {
    justify-content: space-evenly;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
nav > ul > li {
    flex: 1;
}
nav > ul, nav > ul > li, nav > ul > li:hover > ul > li {
    display: flex;
}
nav > ul > li > ul > li {
    display: none;
}

<nav>
    <ul>
        <li>Home</li>
        <li>Usuários
            <ul>
                <li>Conectar</li>
                <li>Cadastrar</li>
                <li>Meu perfil</li>
                <li>ITEM MUITO LARGO</li>
            </ul>
        </li>
        <li>UFEF</li>
    </ul>
</nav>