Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Darkstar

Submenu CSS

Por , em Desenvolvimento frontend

Recommended Posts

Darkstar    1

Darkstar
Postado

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"><html xmlns="http://www.w3.org/1999/xhtml">	<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;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Darkstar, obrigado por postar como você resolveu o problema ;)

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Darkstar    1

Darkstar
Postado

la venho eu denovo..bom.. como o menu é horizontal, e a div de conteúdo fica embaixo, usando o z-index: -1; ele apareceu certinho. MAS o conteúdo da div que esta -1, fica inacessível, ou seja, eu não consigo clicar em links, selecionar textos etc... ou seja, voltei pra estaca zero.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Darkstar    1

Darkstar
Postado

bom arrumei.. hehehe.. por enquanto parece que vai funcionar direitinho... eu havia esquecido de colocar o z-index na div principal onde estava o menu.. por isso não funcionava.. agora foi direitinho.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito