Do not adjust menu when submenu appears

Question

Do not adjust menu when submenu appears

Navigation

#1 by (0 votes)

0

I'm starting with flexbox, I'd like to make a menu that does not fit the width when the 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 some things, but without success

css flexbox

asked by anonymous 25.05.2018 / 22:07

1 answer

Widget or buttons on lock screen Connect to the database using .Net Core 2

score 0 · Accepted Answer

Just add the flex property in the menus. To keep the alignment of words 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>