Suporte » Temas » Menu Cascata

  • Resolvido gilsonluiz

    (@gilsonluiz)


    Olá Pessoal,

    Estou com um probleminha que não estou conseguindo resolver.

    Este erro me acontece tanto no IE quanto no Firefox.

    Bom o erro é o seguinte, como pode se ver na imagem a seguir, o menu de socios não está inserindo o fundo na ultimo item, e tbm gostaria de deixar de uma forma mais justa, pois quando passo o mause no link ele fica de outra cor para destacar, mas cobre somente o texto, e não até o final, como poderia corrigir isso ?

    A imagem do Problema:
    Quando não passo o Mouse
    http://img821.imageshack.us/img821/682/erromenu1.jpg

    Quando passo o Mouse
    http://img638.imageshack.us/img638/8712/erromenu.jpg

    Codigos do menu:

    <div id="menu">
             <ul>
                <li><a href="<?php echo get_option('home');?>" title="Página Inicial" alt="Página Inicial">Home</a></li>
                <li><a href="<?php echo get_option('home');?>/?page_id=4" title="Clube" alt="Clube">Clube</a></li>
                <li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretoria" alt="Diretoria">Diretoria</a>
                <ul>
                <li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretorias Anteriores" alt="Diretorias Anteriores">Diretorias Anteriores</a>
                   <ul>
                      <li><a href="<?php echo get_option('home');?>/?page_id=8" title="1ª Diretoria" alt="1ª Diretoria">1ª Diretoria</a></li>
                      <li><a href="<?php echo get_option('home');?>/?page_id=8" title="2ª Diretoria" alt="2ª Diretoria">2ª Diretoria</a></li>
                   </ul>
                <li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretoria Atual" alt="Diretoria Atual">Diretoria Atual</a></li>
                </ul>
                </li>
                </li>
                <li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios" alt="Sócios">Sócios</a>
                   <ul>
                      <li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Fundadores" alt="Sócios Fundadores">Sócios Fundadores</a></li>
                      <li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Desistentes" alt="Sócios Desistentes">Sócios Desistentes</a></li>
                      <li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Atuais" alt="Sócios Atuais">Sócios Atuais</a></li>
                   </ul>
                </li>
                <li><a href="<?php echo get_option('home');?>/?page_id=48" title="Galeria de Fotos" alt="Galeria de Fotos">Galeria de Fotos</a></li>
                <li><a href="<?php echo get_option('home');?>/?cat=1" title="Notícias" alt="Notícias">Notícias</a></li>
                <li><a href="<?php echo get_option('home');?>/?page_id=16" title="Parceiros" alt="Parceiros">Parceiros</a></li>
                <li><a href="<?php echo get_option('home');?>/?page_id=172" title="Área Restrita" alt="Área Restrita">Área Restrita</a></li>
                <li><a href="http://webmail.interarabuta.com.br/" title="E-Mail" alt="E-Mail">E-mail</a></li>
                <li><a href="<?php echo get_option('home');?>/?page_id=19" title="Contato" alt="Contato">Contato</a></li>
             </ul>
          </div>

    Codigos CSS:

    #menu{
       list-style:none;
       float:left;
       background:url(images/bg-menu1.jpg) repeat-x top;
       width:900px;
       color:#ffffff;
       font-size:15px;
       text-decoration:none;
       height:29px;
    }
    #menu li{
       list-style:none;
       float:left;
       position:relative;
       text-decoration:none;
    }
    #menu li a{
       display:block;
       padding:5px 10px;
       color:#ffffff;
       font-size:15px;
       text-decoration:none;
    }
    #menu li a:hover{
       background:#333333;
       height:19px;
    }
    #menu li ul{
       position:absolute;
       top:27px;
       width:150px;
       background:url(images/bg-menu1.jpg) repeat-x top;
       display:none;
    }
    #menu li:hover ul ul{
       display:none;
    }
    #menu li:hover ul, #menu li ul li:hover ul{
       display:block;
    }
    #menu li ul li{
       display:block;
       height:auto;
    }
    #menu li ul li ul{
       top:0;
       width:90px;
       left:149px;
       background:url(images/bg-menu1.jpg) repeat-x top;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html ul li {
       float:left;
    }
    * html ul li a {
       height:1%;
    }
    /* End */

    Obrigado,
    Gilson Luiz Rauschkolb

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • Primeiramente que o fundo está assim não sendo exibido em todos os itens porque vc está usando uma imagem e repetindo ela para os lados, então quando a ul é grande demais a imagem não cobre todas as partes.

    Use cor ou edite sua imagem para que ela possa se repetir em repeat-y corretamente.

    Para colorir todo o item a tag <a> deve ter display:block ou um tamanho configurado com a largura que vc deseja ou então colorir a li e não o a.

    Isso é meio complicado de olhar código e ver o que tem de errado.

    para mais informações veja
    http://maujor.com/tutorial/ddownmenu.php

    Criador do tópico gilsonluiz

    (@gilsonluiz)

    Obrigado Myst1010

    Agradeço a todas as suas respostas, sempre me ajudam.

    Irei testar isso assim que possivel, pois agora estreitou o meu tempo 😀 começaram as aulas ai complica um pouco.

    Se eu colocar uma imagem para repetir no y ela teria que ser de 150px correto? Para atingir o tamanho do menu Diretoria que fica proximo a isso.

    Obrigado,
    Gilson Luiz Rauschkolb

    Se não me engano seria isso sim.

    Criador do tópico gilsonluiz

    (@gilsonluiz)

    Obrigado Myst1010, tive que fazer algumas alterações mas a sua ajuda foi fundamental.
    Muito obrigado mesmo.

    Segue o codigo alterado:

    #menu{
       list-style:none;
       float:left;
       background:url(images/bg-menu1.jpg) repeat-x top;
       width:900px;
       color:#ffffff;
       font-size:15px;
       text-decoration:none;
       height:29px;
    }
    #menu li{
       list-style:none;
       float:left;
       position:relative;
       text-decoration:none;
    }
    #menu li a{
       display:block;
       padding:5px 10px;
       color:#ffffff;
       font-size:15px;
       text-decoration:none;
    }
    #menu li a:hover{
       background:#333333;
       height:19px;
    }
    <strong>/*Aqui tive que inserir outras duas configurações para o hover por motivo de tamanho de cada celula.*/
    #menu li ul a:hover{
       background:#333333;
       width:130px;
    }
    #menu li ul li ul a:hover{
       background:#333333;
       width:70px;
    }
    #menu li ul{
       position:absolute;
       top:27px;
       width:150px;
       background:url(images/bg-menumaior.jpg) repeat-x top;/* Aqui refiz a imagem de fundo para os menus com o tamanho de 150px de largura. E mudei a repetição para y.*/
       display:none;
    }</strong>#menu li:hover ul ul{
       display:none;
    }
    #menu li:hover ul, #menu li ul li:hover ul{
       display:block;
    }
    #menu li ul li{
       display:block;
       height:auto;
    }
    <strong>#menu li ul li ul{
       top:0;
       width:90px;
       left:149px;
       background:url(images/bg-menu1.jpg) repeat-x top;/* Aqui refiz a imagem de fundo para os menus com o tamanho de 150px de largura. E mudei a repetição para y.*/
    }</strong>/* Fix IE. Hide from IE Mac \*/
    * html ul li {
       float:left;
    }
    * html ul li a {
       height:1%;
    }
    /* End */

    Obrigado,
    Gilson Luiz Rauschkolb

    que bom que funcionou.
    Abraços.

    Criador do tópico gilsonluiz

    (@gilsonluiz)

    Bom Dia Pessoal,

    So tem um probleminha ;D

    não sei o que houve, tenho que fazer uma configuração especial para o IE 6?

    Segue o link de uma imagem:

    Imagem

    Obrigado,
    Gilson Luiz Rauschkolb

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • O tópico ‘Menu Cascata’ está fechado para novas respostas.