1

O submenu fica do tamanho do texto, gostaria que ele ficasse do tamanho do 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>

1 Resposta 1

4

Você precisa definir uma position: relative na ul de primeiro nível para que o position: absolute da ul de segundo nível se baseie no elemento onde ele é filho, e então colocar um width: 100%.

Ficaria assim:

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>

Mas para se precaver desses problemas com position, você pode definir todos os elementos com position: relative. Coloque no INÍCIO do seu CSS:

<style>
*{
   position: relative;
}
...
</style>
5
  • Funciona, mas sabe como posso fazer isso com flex em vez de width?
    – Costamilam
    Commented 27/05/2018 às 13:33
  • Cara, só conheço com width mesmo. Veja um menu parecido que tb usa width no flexbox: codepen.io/barkins/pen/KzrKrj
    – Sam
    Commented 27/05/2018 às 14:52
  • Sim, atualizei a resposta com o efeito.
    – Sam
    Commented 27/05/2018 às 15:14
  • Adicionei um efeito de opacidade para ficar mais suave ainda :D
    – Sam
    Commented 27/05/2018 às 15:59
  • Fico top valeu!
    – Costamilam
    Commented 27/05/2018 às 16:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .