Publicado em 26 de jun.

Submenu CSS

Galera.. seguinte.. to sofrendo um pouco pra montar esse submenu em CSS.. o problema é o seguinte.. eu quero fazer com que ele seja ativado somente quando o mouse passar em produtos... no FF ele fica certinho embaixo do botão produtos e aparece por cima das outras divs... mas no IE.. ele se posiciona no fim da imagem do produto e fica por baixo das outras divs.. e não teve santo que fizesse ele ficar por cima.. seguem os meus códigos pra facilitar..

submenu.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Nome do Site </title> <link href="resources/styles/general_div.css" rel="stylesheet" type="text/css" /> <link href="resources/styles/general_text.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" src="resources/scripts/java.js" type="text/javascript"></script> </head> <body> <div id="container_topo"> <div class="container_topo_logo"> <img src="resources/images/logo.jpg" alt="Logo" /> </div> <div class="container_topo_menu"> <div class="container_topo_menu_item"> <a href="java script:;" /><img src="resources/images/menu_empresa.jpg" alt="Empresa" border="0" /></a> </div> <div class="container_topo_menu_item"> <a href="java script:;" /><img src="resources/images/menu_produtos.jpg" alt="Produtos" border="0" /></a> <ul class="submenu_produtos"> <li>Métricas de Marketing</li> <li>Pesquisas de Mercado</li> <li>Consultoria</li> <li>Planejamento Estratégico</li> <li>Treinamento</li> <li>Redação e Produção de Cases</li> </ul> </div> <div class="container_topo_menu_item"> <a href="java script:;" /><img src="resources/images/menu_conquistas.jpg" alt="Conquistas" border="0" /></a> </div> <div class="container_topo_menu_item"> <a href="java script:;" /><img src="resources/images/menu_clientes.jpg" alt="Clientes" border="0" /></a> </div> <div class="container_topo_menu_item"> <a href="java script:;" /><img src="resources/images/menu_publicacoes.jpg" alt="Publicações" border="0" /></a> </div> <div class="container_topo_menu_item"> <a href="java script:;" /><img src="resources/images/menu_curriculo.jpg" alt="Currículo" border="0" /></a> </div> <div class="container_topo_menu_item"> <a href="java script:;" /><img src="resources/images/menu_contato.jpg" alt="Contato" border="0" /></a> </div> </div> </div> <div id="container_corpo_azul_externo"> <div id="container_corpo_azul_interno"> Teste </div> </div> <div id="container_corpo_branco"> Teste </div> <div id="container_rodape"> <div class="container_rodape_imagem"> <img src="resources/images/logo1.jpg" border="0" /> </div> <div class="container_rodape_texto"> Rodapé </div> </div></body></html>
general_div.css

/ CSS Document /body{ margin:0px; background:url(../images/background.jpg) repeat-x top left;}/ DEFINIÇÕES DO TOPO /#container_topo{ width:760px; height:109px; margin:15px auto 0 auto; position:relative;}.container_topo_logo{ margin-left:10px; float:left; width:250px; height:52px;}.container_topo_menu{ float:right; width:467px; height:31px; margin-top:78px;}.container_topo_menu_item{ float:left; position:relative;}/ DEFINIÇÕES DO CORPO /#container_corpo_azul_externo{ position:relative; width:100%; background-color:#DEF0FA; z-index:0;}#container_corpo_azul_interno{ margin:0px auto 0 auto; position:relative; width:740px;}#container_corpo_branco{ margin: 10px auto 0 auto; position:relative; width:740px;}#container_rodape{ margin:20px auto 0 auto; position:relative; width:740px;}.container_rodape_texto{ position:relative; float:left;}.container_rodape_imagem{ position:relative; float:right;}.submenu_produtos{ width:218px; position:absolute; background:#FFF; list-style-image:url(../images/marcador_lista.jpg); margin:10px 0 10px 0; padding-left:18px;}
general_text.css

/ CSS Document/*{ font-family:Tahoma, Arial, sans-serif; font-size:11px; color:#006699; font-weight:normal;}.conteudo_texto_negrito{ font-family:Tahoma, Arial, sans-serif; font-size:11px; color:#006699; font-weight:bold;}.conteudo_texto_normal_link a{ font-family:Tahoma, Arial, sans-serif; font-size:11px; color:#006699; font-weight:normal; text-decoration:underline;}.conteudo_botoes{ font-family:Tahoma, Arial, sans-serif; font-size:11px; color:#7E0E16; font-weight:normal; text-decoration:underline;}.conteudo_texto_italico{ font-family:Tahoma, Arial, sans-serif; font-size:11px; color:#006699; font-weight:normal; font-style:italic;}.conteudo_botoes a{ font-family:Tahoma, Arial, sans-serif; font-size:11px; color:#7E0E16; font-weight:normal; text-decoration:underline;}.conteudo_botoes a:hover{ font-family:Tahoma, Arial, sans-serif; font-size:11px; color:#7E0E16; font-weight:normal; text-decoration:underline;}.container_rodape_texto { font-family:Tahoma, Arial, sans-serif; font-size:10px; color:#52ACDC; font-weight:normal;}.container_rodape_texto a{ font-family:Tahoma, Arial, sans-serif; font-size:10px; color:#52ACDC; font-weight:normal; text-decoration:underline;}.container_rodape_texto a:hover{ font-size:10px; color:#2585B8; font-weight:normal; text-decoration:underline;}.submenu_produtos li{ font-family:Tahoma, Arial, sans-serif; font-size:12px; color:#075E8B; line-height:21px;}