Menu Cascata
-
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.jpgQuando passo o Mouse
http://img638.imageshack.us/img638/8712/erromenu.jpgCodigos 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
-
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.phpObrigado 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 RauschkolbSe não me engano seria isso sim.
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 Rauschkolbque bom que funcionou.
Abraços.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:
ImagemObrigado,
Gilson Luiz Rauschkolb
- O tópico ‘Menu Cascata’ está fechado para novas respostas.