Boas pessoal, estou com um problma chato enquanto tento tratar de um menu css, tenho o seguinte código css: .menu{width:963px;float:left;clear:both;background :url(bg.jpg) repeat-x;margin-top:25px;} .menu ul{float:left;} .menu ul li{float:left;padding:0px ;width:auto;} .menu ul li img{float:left;margin:10px 0px 0px 0px;} .menu ul li a{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 10px 0px 5px;margin:0px;float:left;width:auto;} .menu ul li a span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;} .menu ul li a.active span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;} .menu ul li a span:hover, .menu li a.active{background:url(navi_hover.png) repeat-x;font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;} .menu ul li a .icon1:hover,.menu li a.active span.icon1{background:url(1_hover.png) right 10px no-repeat;} .menu ul li a .icon2:hover,.menu li a.active span.icon2{background:url(2_hover.png) right 10px no-repeat;} .menu ul li a .icon3:hover,.menu li a.active span.icon3{background:url(3_hover.png) right 10px no-repeat;} .menu ul li a .icon4:hover,.menu li a.active span.icon4{background:url(4_hover.png) right 10px no-repeat;} .menu ul li a .icon5:hover,.menu li a.active span.icon5{background:url(5_hover.png) right 10px no-repeat;} .menu ul li a .vip:hover,.menu li a.active span.vip{background:url(6_hover.png) right 10px no-repeat;} .menu ul li a .near:hover,.menu li a.active span.near{background:url(7_hover.png) right 10px no-repeat;} .icon1{float:left;background:url(1.png) right 10px no-repeat;} .icon2{float:left;background:url(2.png) right 10px no-repeat;} .icon3{float:left;background:url(3.png) right 10px no-repeat;} .icon4{float:left;background:url(4.png) right 10px no-repeat;} .icon5{float:left;background:url(5.png) right 10px no-repeat;} .vip{float:left;background:url(6.png) right 10px no-repeat;} .near{float:left;background:url(7.png) right 10px no-repeat;} .menu ul ul{ position:absolute; width:12em; top:5.6em; display:none; float:left; clear:both; background:url(menu_bg.jpg); } .menu ul ul a{ width:12em; float:left; } .menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{ display:none; } .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{ display:block; } .menu ul li a:hover,.menu li a.active{background:url(navi_hover.png) repeat-x;} .downarrow{background:url(downarrow.png) center 43px no-repeat;} .menu li:hover div.bg_downarrow{display:block;} .menu ul li.m_spliter{float:left;height:42px;background:url (divisor.png) right 2px no-repeat;} .menu ul li.m_spliter:last-child{background:none;} E o seguinte código HTML: <div class="menu "> <ul> <li class="m_spliter"> <a href="" title="" <span class="vip">Vip</span></a> <ul> <li><a href="#">sub-menu1</a> <ul> <li><a href="#">sub-menu1.1</a> <ul> <li><a href="#"></a></li> <li><a href="#">sub-menu1.1.1</a></li> <li><a href="#">sub-menu1.1.2</a></li> </ul> </li> <li><a href="#">sub-menu1.2 <ul> <li><a href="#">sub-menu1.2.1</a></li> <li><a href="#">sub-menu1.2.2</a></li> <li><a href="#">sub-menu1.2.3</a></li> </ul> </li> <li><a href="#">sub-menu1.3</li> <li><a href="#">sub-menu1.4</li> </ul> </li> <li><a href="#">sub-menu2</a> <ul> <li><a href="#">sub-menu2.1</a> <ul> <li><a href="#">sub-menu2.1.1</a></li> <li><a href="#">sub-menu2.1.2</a></li> <li><a href="#">sub-menu2.1.3</a></li> </ul> </li> <li><a href="#">sub-menu2.2</a> <ul> <li><a href="#">sub-menu2.2.1</a></li> <li><a href="#">sub-menu2.2.2</a></li> <li><a href="#">sub-menu2.2.3</a></li> </ul> </li> </li> </ul> <li><a href="#">sub-menu3</a></li> </ul> </li> </ul> </div> O que pretendo é criar um menu css horizontal com multi-level, o primeiro multi level supostamente deverá aparecer para baixo, e o segundo multi level deve aparecer à direita mas neste momento aparece por baixo... O que está a falhar no meu css? Tentei seguir vários tutoriais mas não adianta... PS: também nao estou a conseguir mudar a cor das letras do primeiro multilevel ao fazer hover... Desde já obrigado.
Eu numa 1ª fase, optava por pôr isso tudo a funcionar num nível mais básico, tal como no link que te mostrei. Ou seja sem imagens, efeitos e outras artimanhas, e depois de ter tudo a funcionar, então começava a acrescentar funcionalidades.
Vendo assim de relance o css, tens um "top" associado a todos os ul (.menu ul ul). Os sub-menus que queres que apareçam à direita não podem ter um "top", já que vai ser sempre uma "margem" em relação ao parent. Portanto, ou mudas o esquema de classes css que tens ou então dás uma classe extra aos sub-menus que faça o "override" do "top". Com isto resolvido já devem aparecer à direita. Se porventura não estiverem suficientemente à direita alinhas com uma "margin-left".
CSS .menu ul ul ul ul .menu li li li li Não aconselho muito a usar isto, a subcategoria da subcategoria ainda mais da subcategoria da classe principal leva as seguintes propriedades de CSS; quase mais valia dar-lhes um id próprio para não dar erro no CSS. E falo por experiência própria sempre que faço uso e abuso das subcategorias customo dar barraca! Cumps
Ora portanto, aqui fica uma possivel solução para o teu problema. CSS .menu{width:963px;float:left;clear:both;background :url(bg.jpg) repeat-x;margin-top:25px;} .menu ul{float:left;} .menu ul li{float:left;padding:0px ;width:auto;} .menu ul li img{float:left;margin:10px 0px 0px 0px;} .menu ul li a{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 10px 0px 5px;margin:0px;float:left;width:auto;} .menu ul li a span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;} .menu ul li a.active span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;} .menu ul li a span:hover, .menu li a.active{background:url(navi_hover.png) repeat-x;font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;} .menu ul li a .icon1:hover,.menu li a.active span.icon1{background:url(1_hover.png) right 10px no-repeat;} .menu ul li a .icon2:hover,.menu li a.active span.icon2{background:url(2_hover.png) right 10px no-repeat;} .menu ul li a .icon3:hover,.menu li a.active span.icon3{background:url(3_hover.png) right 10px no-repeat;} .menu ul li a .icon4:hover,.menu li a.active span.icon4{background:url(4_hover.png) right 10px no-repeat;} .menu ul li a .icon5:hover,.menu li a.active span.icon5{background:url(5_hover.png) right 10px no-repeat;} .menu ul li a .vip:hover,.menu li a.active span.vip{background:url(6_hover.png) right 10px no-repeat;} .menu ul li a .near:hover,.menu li a.active span.near{background:url(7_hover.png) right 10px no-repeat;} .icon1{float:left;background:url(1.png) right 10px no-repeat;} .icon2{float:left;background:url(2.png) right 10px no-repeat;} .icon3{float:left;background:url(3.png) right 10px no-repeat;} .icon4{float:left;background:url(4.png) right 10px no-repeat;} .icon5{float:left;background:url(5.png) right 10px no-repeat;} .vip{float:left;background:url(6.png) right 10px no-repeat;} .near{float:left;background:url(7.png) right 10px no-repeat;} .menu ul ul{ position:absolute; width:12em; /*top:5.6em; Se precisares de um top para alinhar o menu coloca-o noutro elemento, possivelmente o parent do 1º ul que tens */ display:none; float:left; clear:both; background:url(menu_bg.jpg); } .menu ul ul a{ width:12em; float:left; } .menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{ display:none; } .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{ display:block; } .menu ul li a:hover,.menu li a.active{background:url(navi_hover.png) repeat-x;} .downarrow{background:url(downarrow.png) center 43px no-repeat;} .menu li:hover div.bg_downarrow{display:block;} .menu ul li.m_spliter{float:left;height:42px;background:url (divisor.png) right 2px no-repeat;} .menu ul li.m_spliter:last-child{background:none;} /* Classe para alinhar os submenus, para que não fiquem "em cima" uns dos outros */ .submenuUl { margin-left: 6em; } /* O primeiro submenu é especial pois o "Vip" não tem a mesma largura dos restantes submenus */ .submenuUl_inicial{ margin-left: 20px; } Código HTML <div class="menu "> <ul> <li class="m_spliter"> <a href="" title="" <span class="vip">Vip</span></a> <ul class="submenuUl_inicial"> <li><a href="#">sub-menu1</a> <ul class="submenuUl"> <li><a href="#">sub-menu1.1</a> <ul class="submenuUl"> <li><a href="#"></a></li> <li><a href="#">sub-menu1.1.1</a></li> <li><a href="#">sub-menu1.1.2</a></li> </ul> </li> <li><a href="#">sub-menu1.2 <ul class="submenuUl"> <li><a href="#">sub-menu1.2.1</a></li> <li><a href="#">sub-menu1.2.2</a></li> <li><a href="#">sub-menu1.2.3</a></li> </ul> </li> <li><a href="#">sub-menu1.3</li> <li><a href="#">sub-menu1.4</li> </ul> </li> <li><a href="#">sub-menu2</a> <ul class="submenuUl"> <li><a href="#">sub-menu2.1</a> <ul class="submenuUl"> <li><a href="#">sub-menu2.1.1</a></li> <li><a href="#">sub-menu2.1.2</a></li> <li><a href="#">sub-menu2.1.3</a></li> </ul> </li> <li><a href="#">sub-menu2.2</a> <ul class="submenuUl"> <li><a href="#">sub-menu2.2.1</a></li> <li><a href="#">sub-menu2.2.2</a></li> <li><a href="#">sub-menu2.2.3</a></li> </ul> </li> </li> </ul> <li><a href="#">sub-menu3</a></li> </ul> </li> </ul> </div> Pareceu-me ser a solução mais simples. Basicamente retirei o "top" do ".menu ul ul" no CSS (se precisares de um top no menu coloca-o noutro elemento que não no ul). Criei as classes "submenuUl" e "submenuUl_inicial" para alinhar os submenus com o "margin-left". O "submenuUl_inicial" existe porque a "raiz" do menu (Vip) não tem a mesma largura do resto do menu. Daí o 1º submenu ter uma "margin-left" diferente dos restantes. Como conselho, digo-te para não teres medo de criares classes conforme precisares (dentro de certos limites). No final (depois de teres tudo como precisas) dás uma vista de olhos pelo css todo e tentas condensar o código (para evitar repetição de código).
Boas, já tenho o menu a funcionar, no entanto, está muito mau esteticamente... o highlight fica mais largo do que o submenu (sai para fora no ultimo nivel) e gostava de saber como colocar um background diferente nos submenus e colocar um "rastreio" (as selecções ficarem marcadas), para os utilizadores não se perderem?? (Estilo windows em menus multi level, que nos vai dizendo o que vamos seleccionando).