Submenu of the same menu width

Question

Submenu of the same menu width

Navigation

#1 by (3 votes)

1

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>

html css flexbox flex

asked by anonymous 27.05.2018 / 04:57

1 answer

Action while the button is being clicked Why should not I use Jquery with React?

score 3 · Accepted Answer

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

It 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 be aware of these problems with position , you can set all elements with position: relative . Put it at the top of your CSS:

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