Submenu the same width as the menu

Question

The submenu is the size of the text, I would like it to be the size of the menu

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow:  0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
header > nav {
    position: relative;
}
header nav * {
    display: flex;
    flex: 1 1 auto;
}
header > nav ul {
    padding: 0;
    margin: 0;
}
header > nav ul li {
    list-style: none;
    line-height: 50px;
}
header > nav > ul > li {
    flex-direction: column;
    text-align: center;
}
header > nav > ul > li[ng-click]:hover {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
header > nav > ul > li > ul {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    position: absolute;
    flex-direction: column;
    flex-grow: 1;
}
header > nav > ul > li > ul > li {
    background-color: rgba(255, 255, 255, 1);
    padding-left: 15px;
    display: none;
}
header > nav > ul > li:hover > ul > li {
    display: flex;
}

<header><nav>
    <ul>
        <li>Home</li>
        <li>Usuários
            <ul>
                <li>Conectar</li>
                <li>Cadastrar</li>
                <li>Meu perfil</li>
            </ul>
        </li>
        <li>UFEF</li>
    </ul>
</nav></header>

Answer 1

You need to define a position: relative in ul first level so that the position: absolute of ul second level is based on the element where he is son, and then put a width: 100%.

Would look like this:

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow:  0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
header > nav {
    position: relative;
}
header nav * {
    display: flex;
    flex: 1 1 auto;
}
header > nav ul {
    padding: 0;
    margin: 0;
}
header > nav ul li {
    list-style: none;
    line-height: 50px;
   position: relative; /* adicionado */
}
header > nav > ul > li {
    flex-direction: column;
    text-align: center;
}
header > nav > ul > li[ng-click]:hover {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
header > nav > ul > li > ul {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    position: absolute;
    flex-direction: column;
    flex-grow: 1;
    width: 100%; /* adicionado */
    transition: all .7s ease; /* adicionado */
    height: 0; /* adicionado */
    opacity: 0; /* adicionado */
}

/* adicionado */
header > nav > ul > li > ul:hover {
    height: 150px; /* 3x line-height das LIs */
    opacity: 1; /* adicionado */
}

header > nav > ul > li > ul > li {
    background-color: rgba(255, 255, 255, 1);
    /* padding-left: 15px;  removido */
    display: none;
    flex-direction: column;
}
header > nav > ul > li:hover > ul > li {
    display: flex;
}

<header><nav>
    <ul>
        <li>Home</li>
        <li>Usuários
            <ul>
                <li>Conectar</li>
                <li>Cadastrar</li>
                <li>Meu perfil</li>
            </ul>
        </li>
        <li>UFEF</li>
    </ul>
</nav></header>

But to avoid these problems with position, you can define all elements with position: relative. Put to the BEGINNING of your CSS:

<style>
*{
   position: relative;
}
...
</style>