Configurar menu como block

[savage 0]

Na imagem 1 quando deixo uma subcategoria nos menus de cima, os menus de baixo ficam todos alinhados corretamente. Porem ao tirar uma subcategoria da categoria de cima, o menu da categoria de baixo ficam todos desalinhados.

 

Imagem 1

 

 

Imagem 2

 

 

 

 

 

Segue o custommenu.css que fiz do meu jeito

 

#custommenu {

    position:relative;

   

    padding: 8px 40px;

    



	

	height: auto;

	

}

/*IE7 fix*/

*:first-child+html #custommenu { 

 z-index: 998;

}

div.menu {

    float: left;

	 padding: 0px 0px 3px 8px;

	 margin: 0px 0px 0px 1px;

	

	 font-weight: bold;

	font-size: 15px;

	text-transform: uppercase;

	font-family: "Arial";

	height: 23px;

	border-radius: 3px 3px 0px 0px;

}



div.menu a {

	display: block;

	height: 23px;

	opacity: 1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);



}

div.menu a span {

	display: block;

	background:url(../images/menu-novo.png) ;
background-repeat: no-repeat;
	

background-position: right;

background-size:1px 11px;

	padding-right: 17px;

padding-left: 7px;

	

line-height: 25px;





	

}

div.menu a span:hover {

	cursor: pointer;

	opacity: 1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);



 

}

div.menu.active, div.menu:hover {

	

background: #8ae6e7; /* Old browsers */

background: -moz-linear-gradient(top,  #9ec25e 2%, #9ec25e 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#9ec25e), color-stop(100%,#9ec25e)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #9ec25e 2%,#9ec25e 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #9ec25e 2%,9ec25e 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #9ec25e 2%,#9ec25e 100%); /* IE10+ */

background: linear-gradient(top,  #9ec25e 2%,#9ec25e 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ec25e', endColorstr='#9ec25e',GradientType=0 ); /* IE6-9 */

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

	opacity: 1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

}

div.menu.active a span, div.menu a:hover span {

	color: #ffffff;

	

}



div.wp-custom-menu-popup {

	position: absolute;

	z-index: 3000;

	display: none;

	text-align: left;

	background: #e5ffff; /* Old browsers */

background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 59%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(59%,#ffffff)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 59%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 59%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 59%); /* IE10+ */

background: linear-gradient(top,  #ffffff 0%,#ffffff 59%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */



	border: 2px solid #9ec25e;

	padding: 0px 10px 10px 10px;



}



div.menu a, div.wp-custom-menu-popup a {

    text-decoration: none;

    display:block;

	 cursor: pointer;



	 color: #fff;

opacity: 1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);	 

}

div.block2  {

	display: block;

	padding-top: 10px;



	line-height: 100%;

}

div.block2 p {

margin-bottom: 3px;

line-height: 120%;

font-size: 11px;

}

div.block2 p a {

	display: inline;

}



div.wp-custom-menu-popup a.act {

    color: #04a0bb;

}

div.column {

	float: left;

	width: 150px; /* column width */

	padding: 0px;

	margin: 0px 10px 0px 0px;

	

}

div.itemSubMenu {

    margin-left: 5px;

}

.clearBoth {

    clear:both;

	 height: 0;

	 overflow: hidden;

}

a.level2:link, a.level2:visited {

	

	padding-left: 5px;

	font-size: 12px;

	color: #454545;

	line-height: 100%;

	padding-bottom: 3px;

}

a.level2:hover {

	color: #04a0bb;

}

a.level1:link, a.level1:visited {

	font-size: 14px;

	font-weight: bold;

	color: #98bf52;

	text-transform: uppercase;

	line-height: 100%;

	padding-bottom: 4px;

	margin-top: 10px;

}

a.level1:hover {

	color: #454545;

}

div.level1 {

	margin-bottom: 10px;

}

 

 

 

 

 

[angelorubin 142]

Bom dia,

 

Se pudesse postar o html também, ajudaria.

[William Bruno 1501]

coloca um clear: both no item "Capa Flip LG"

[savage 0]

coloca um clear: both no item "Capa Flip LG"

 

Não deu certo. Já tentei de tudo, o problema também é que nao tenho o site no ar, está em localhost. Esse menu que eu quero é do magento, loja virtual, Segue uma loja que tem o css igual que se chama .custommenu.css

 

Segue o site http://www.espacoquallys.com.br/

 

Se por o mouse em cima, vai aparecer vários menu com submenus

 

 

Porem quero que seja como mostrei ma figura acima ex:

LG MOTOROLA SAMSUNG SONY ERICSSON SONY

Test1 Test1 Test1 Test1 Test1 Test1

FLIP LG FLIP MOTOROLA FLIP SAMSUNG FLIP SONY FLIP ERICSSON FLIP SONY

Test1 Test1 Test1 Test1 Test1 Test1

Mas, ao acrescentar por ex no Menu LG o submenu Test2 em baixo do Test1 o FLIP LG não saia da linha como está o FLIP MOTOROLA FLIP SAMSUNG FLIP SONY FLIP ERICSSON FLIP SONY. Ou seja, que todos eles desçam por igual. Não sei se me entendeu.

[William Bruno 1501]

esse site q vc passou trabalha de forma diferente. Ele faz colunas e não linhas.

 

para fazer as linhas do seu, basta fazer oq eu falei, colocando o clear no primeiro elemento de cada linha.

[savage 0]

Veja o menu real www.shopdoandroid.com.br/magento_fim

[William Bruno 1501]

cara, ta bem feio isso ai.

 

ai vc ta trabalhando com colunas, mas os últimos itens estão separados.

Vc precisa corrigir esse backend ai primeiro, para gerar um html mais limpo, e não esse monte de div.

[savage 0]

Mas está dessa forma por ser um modulo magento. E a base do css é esse http://web-experiment.info/articles/cat/custom_menu/post/custom_magento_menu_style/

 

Apenas tentei alterar algumas coisas como as cores e etc. De qualquer forma obrigado.