Configurar menu como block
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
/applications/core/interface/imageproxy/imageproxy.php?img=http://img6.imageshack.us/img6/4308/menu1tp.jpg&key=7f1f6b62a77cc2843bdb0137960cfed96bc3d41221c27ff79a805adb85f1f248" alt="menu1tp.jpg" />
Imagem 2
/applications/core/interface/imageproxy/imageproxy.php?img=http://img12.imageshack.us/img12/961/menu2pj.jpg&key=5ac8c6d70247757085619eb26183cfebcd4dd56390929a33b58c7c4109661b79" alt="menu2pj.jpg" />
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;
}Discussão (7)
Carregando comentários...