Menu flyout dinâmico de vários níveis
Eu tenho a seguinte estrutura para um menu flyout com CSS puro:
HTML
<ul class="menu">
<li><a href="#">Base</a>
<ul>
<li><a href="#">Clients</a>
<ul>
<li><a href="#">New</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Employees</a></li>
</ul>
</li>
<li><a href="#">Search</a></li>
<li><a href="#">System</a></li>
</ul>
CSS
a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}
.menu {
margin:0; padding:0;
width: 100%; height: auto;
background: #ccc;
position: absolute;
top:0; left:0;
}
.menu li {
float:left;
display:block
}
.menu li li {
float:none;
}
.menu li a {
padding: 0 5px;
}
.menu li a:hover {
background: #bbb
}
.menu li ul {
padding:0; margin:0;
background: #ddd;
width: auto;
position: absolute;
visibility: hidden;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
margin: 20px 0 0 0;
}
.menu li:hover ul {
margin:0;
opacity: 1;
visibility: visible;
display:block
}
.menu li ul li {
clear:both
}
.menu li ul li a {
width: auto;
display:block;
}
.menu li ul li ul {
position: absolute;
top: 0; left: 72px;
margin: 0 0 0 20px;
display: block;
visibility: hidden;
opacity: 0
}
.menu li ul li ul li {
position: relative;
display:none;
visibility: hidden;
opacity: 0
}
.menu li ul li:hover ul li {
visibility: visible;
opacity: 1;
display:block
}
Tudo está funcionando bem para o primeiro e segundo níveis do menu. Segundo nível (.menu li ul
) é dinâmico, portanto, se o comprimento de uma opção for alterado, isso deve aumentar sua largura.
É exatamente de onde minha pergunta veio. Eu quero que o terceiro nível sempre fique no final do segundo nível, independentemente dowidth
do segundo nível.
Vou tentar deixar mais claro com as imagens a seguir.
Isto é o que eu tenho agora:
Aqui está o que acontece quando o comprimento de uma opção é aumentado:
A seguir, como o menu deve se comportar:
É uma maneira de fazer isso com CSS puro?
Se não, qual será a minha melhor escolha para conseguir o que eu quero?
Desde já, obrigado.