CSS misto horizontal e vertical com <menu><li>
-
26-12-2019 - |
Pergunta
Estou tentando criar um menu com itens mistos verticais e horizontais.É assim que o menu deve ficar:
item 1 item 3 item 5 item 7
item 2 item 4 item 6 item 8
O que eu tentei foi o seguinte HTML:
<menu>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</menu>
E CSS:
.navigation menu {
float: right;
margin-top:103px;
width:683px;
}
.navigation menu li {
display:block;
width: 115px;
float: none;
background-image:none;
text-align:right;
}
.navigation menu li:nth-child(3) {
float: left;
}
.navigation menu li:nth-child(4) {
float: none;
}
.navigation menu li:nth-child(5) {
float: left;
}
.navigation menu li:nth-child(6) {
float: none;
}
Mas não funciona, eu acho, é demais para CSS :)
Alguém tem uma ideia?Agradecemos antecipadamente por qualquer ajuda!
Saudações Est Ro
Solução
Mantenha os elementos estranhos flutuando para a esquerda.
Faça com que os elementos pares não tenham largura (margem direita:-115px) e posicione-os 155 px à esquerda e a distância apropriada para baixo:
CSS
.menu {
float: left;
margin-top:13px;
width:683px;
}
.menu li {
display:block;
width: 115px;
float: left;
background-image:none;
text-align:right;
}
.menu li:nth-child(even) {
position: relative;
top: 1.2em;
left: -115px;
margin-right: -115px;
}
Outras dicas
O que você pode fazer é definir os itens do menu como
width:25%;
em cada um dos itens do menu e depois flutuá-los para a esquerda.Você pode se livrar de todo o resto.Além disso, como complemento, não use a tag de menu, pois ela está obsoleta.:)
JSFIDDLE
VIOLINO ATUALIZADO
Talvez algo assim?Está um pouco enferrujado, mas cabe no que você deseja.
Eu adicionei um pouco e mudei um pouco
.navigation menu li:nth-child(6) {
float: none;
}