Então galera, estou com um problema em um menu drop down (CSS/jQuery) que estou codificando.
O problema é o seguinte:
Quando o sub menu aparece e eu tento clicar em um dos links eu não consigo. Apenas no IE8 e no Opera.
Acredito que seja problema no position:absolute, não existe problema nenhum no jquery até porque no IE8 e Opera funcionam.
Verifiquem:
CSS
ul#menu{ width:940px; margin-top:13px; } ul#menu li{ list-style:none; text-align:center; float:left; } ul#menu li a{ font:bold 14px Arial, Helvetica, sans-serif; color:#FFF; text-decoration:none; float:left; width:97px; height:34px; background:url(../img/btn/bg_menu_nav_inativo.png) no-repeat; padding:8px 0 0 0; margin-left:18px; position:relative; } ul#menu li a:hover{ background:url(../img/btn/bg_menu_nav_ativo.png) no-repeat; } ul#menu li ul{ width:890px; position:absolute; left:18px; top:40px; padding:5px; z-index:-10px; } ul#menu li ul a{ float:left; width:117px; height:30px; font-size:12px; background:url(../img/btn/bg_sub_menu_nav.png) no-repeat; position:relative; margin:9px 5px 0 0; } ul#menu li ul a:hover{ width:117px; height:30px; background:url(../img/btn/bg_sub_menu_nav.png) no-repeat; } ul#tab1{ background:url(../img/bg/bg-sub-menu.png) no-repeat; width:902px; height:49px; }
HTML
<div id="menu-paginas"> <ul id="menu" class="menu-drop rel-left"> <li> <a href="#">Pendências</a> <ul class="sub" id="tab1"> <li><a href="#">Listagem</a></li> <li><a href="#">Cadastrar</a></li> <li><a href="#">Pendência Rápida</a></li> </ul> </li> <li><a href="#">Atividades</a></li> <li><a href="#">Clientes</a></li> <li><a href="#">Fechamento</a></li> <li><a href="#">Ferramentas</a></li> <li><a href="#">Horas Extra</a></li> <li><a href="#">Agenda</a></li> <li><a href="#">LOG</a></li> </ul> </div>
Imagem

Abraços, aguardo e obrigado!