1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Problema com CSS (Multi Level Dropdown)

Discussão em 'Web Development' iniciada por c|_|, 7 de Maio de 2012. (Respostas: 5; Visualizações: 495)

  1. c|_|

    c|_| Power Member

    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.
     
  2. rosepwr

    rosepwr Power Member

    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.
     
  3. SoundWave

    SoundWave Power Member

    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".
     
  4. Camolas_san

    Camolas_san Power Member

    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
     
  5. SoundWave

    SoundWave Power Member

    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).
     
  6. c|_|

    c|_| Power Member

    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).
     

Partilhar esta Página